From 9ef0a01f5f4898e0b8de65fc639a25e183ef9466 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Oct 2024 16:59:04 -0400
Subject: [PATCH 1/5] tidy up

---
 .../src/routes/tutorial/[...slug]/codemirror.css           | 4 ----
 packages/site-kit/src/lib/styles/tokens.css                | 7 ++-----
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
index 03b5728eae..d9932c1d01 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
@@ -108,10 +108,6 @@
 	border: 2px solid transparent;
 }
 
-.cm-editor .cm-button:active {
-	background: var(--sk-theme-2-variant);
-}
-
 .cm-editor .cm-textfield {
 	background: var(--sk-back-1);
 	color: var(--sk-text-1);
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index c8946afac6..f1ffccec25 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -50,10 +50,9 @@
 
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;
-	--sk-theme-2-hsl: 240, 8%, 44%;
 
 	--sk-theme-1: hsl(var(--sk-theme-1-hsl));
-	--sk-theme-2: hsl(var(--sk-theme-2-hsl));
+	--sk-theme-2: hsl(240, 8%, 44%);
 
 	--sk-back-1: hsl(0, 0%, 100%);
 	--sk-back-2: hsl(0, 0%, 100%);
@@ -71,7 +70,6 @@
 
 	/* same in light mode, different in dark mode */
 	--sk-theme-1-variant: hsl(15, 100%, 50%);
-	--sk-theme-2-variant: hsl(240, 8%, 44%);
 
 	--sk-code-base: var(--sk-text-2);
 	--sk-code-comment: var(--sk-text-4);
@@ -125,7 +123,7 @@
 		--sk-back-6: hsl(0 0 32);
 		--sk-back-translucent: hsl(0 0 100 / 0.1);
 		--sk-theme-1-hsl: 12, 94%, 62%;
-		--sk-theme-2-hsl: 240, 8%, 44%;
+		--sk-theme-2: hsl(240, 8%, 44%);
 		--sk-text-1: hsl(0, 0%, 90%);
 		--sk-text-2: hsl(0, 0%, 80%);
 		--sk-text-3: hsl(0, 0%, 65%);
@@ -135,7 +133,6 @@
 		--sk-shadow: drop-shadow(1px 2px 16px rgb(0 0 0 / 0.5));
 
 		--sk-theme-1-variant: hsl(15, 100%, 40%);
-		--sk-theme-2-variant: hsl(240, 8%, 35%);
 
 		--sk-text-warning-hsl: 32, 67%, 56%;
 

From b1117c1d7017714b08b74e14735a1bc0abd69de3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Oct 2024 17:01:01 -0400
Subject: [PATCH 2/5] remove some junk

---
 .../src/routes/(authed)/apps/+page.svelte     |  8 +------
 apps/svelte.dev/src/routes/_home/common.css   | 22 -------------------
 2 files changed, 1 insertion(+), 29 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index 026f5a302e..8d03cd6375 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -275,13 +275,7 @@
 	}
 
 	ul:not(.selecting) li:hover a {
-		background-color: var(--sk-theme-2);
-		color: white;
-	}
-
-	ul:not(.selecting) li:hover h2,
-	ul:not(.selecting) li:hover span {
-		color: white;
+		background-color: var(--sk-back-4);
 	}
 
 	ul:not(.selecting) li:hover input {
diff --git a/apps/svelte.dev/src/routes/_home/common.css b/apps/svelte.dev/src/routes/_home/common.css
index e2acbf5f2c..c39ee64a44 100644
--- a/apps/svelte.dev/src/routes/_home/common.css
+++ b/apps/svelte.dev/src/routes/_home/common.css
@@ -3,8 +3,6 @@
 }
 
 .home {
-	--background-1: radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247));
-	--background-2: var(--sk-theme-2);
 	overflow-x: hidden;
 }
 
@@ -24,23 +22,3 @@
 		gap: 7rem;
 	}
 }
-
-/* In case JS disabled */
-@media screen and (prefers-color-scheme: dark) {
-	.home {
-		/* --background-1: radial-gradient(circle at top right, rgb(49, 49, 49), rgb(77, 77, 77)); */
-		--background-1: #222;
-		--background-2: #444;
-	}
-
-	html.light .home {
-		--background-1: radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247));
-		--background-2: var(--sk-theme-2);
-	}
-}
-
-html.dark .home {
-	/* --background-1: radial-gradient(circle at top right, rgb(49, 49, 49), rgb(77, 77, 77)); */
-	--background-1: #222;
-	--background-2: #444;
-}

From 2c533c4d32961e38d5f637d0e2f609deb490c20b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Oct 2024 17:07:29 -0400
Subject: [PATCH 3/5] fix some stuff

---
 .../01-welcome-to-svelte/index.md             |  2 +-
 .../routes/tutorial/[...slug]/+page.svelte    | 32 -------------------
 packages/repl/src/lib/Checkbox.svelte         |  3 +-
 .../src/lib/Output/CompilerOptions.svelte     | 21 ++++--------
 packages/repl/src/lib/theme.ts                |  4 ---
 .../site-kit/src/lib/components/Text.svelte   |  5 ---
 6 files changed, 8 insertions(+), 59 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
index c5fa21ace2..07d0af3634 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/index.md
@@ -27,4 +27,4 @@ This tutorial is split into four main parts:
 
 Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
 
-If you get stuck, you can click the `solve` button <span class="desktop">to the left of the editor</span><span class="mobile">in the top right of the editor view</span>. (<span class="mobile">Use the toggle below to switch between tutorial and editor views. </span>The `solve` button is disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.
+If you get stuck, you can click the `solve` button in the top right of the screen. (The `solve` button is disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 2a92105af2..79e8fdd490 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -387,30 +387,6 @@
 		font: var(--sk-font-ui-small);
 	}
 
-	.navigator .solve {
-		position: relative;
-		background: var(--sk-theme-2);
-		padding: 0.5rem;
-		width: 100%;
-		height: 4rem;
-		border-right: 1px solid var(--sk-back-4);
-		color: white;
-		opacity: 1;
-		font: var(--sk-font-ui-small);
-	}
-
-	.navigator .solve:disabled {
-		opacity: 0.5;
-	}
-
-	.navigator .solve:not(:disabled) {
-		background: var(--sk-theme-1);
-	}
-
-	.navigator .solve.completed {
-		background: var(--sk-theme-2);
-	}
-
 	.preview {
 		display: flex;
 		flex-direction: column;
@@ -441,14 +417,6 @@
 		text-align: left;
 	}
 
-	.mobile .navigator .solve {
-		width: 9rem;
-		height: auto;
-		padding: 0.2rem;
-		border-radius: 4rem;
-		border: none;
-	}
-
 	.mobile-filetree {
 		position: absolute;
 		top: 0;
diff --git a/packages/repl/src/lib/Checkbox.svelte b/packages/repl/src/lib/Checkbox.svelte
index 3aab9106c1..9beac06ccd 100644
--- a/packages/repl/src/lib/Checkbox.svelte
+++ b/packages/repl/src/lib/Checkbox.svelte
@@ -30,8 +30,7 @@
 		border-radius: 1em;
 		top: 0;
 		left: 0;
-		background: var(--sk-theme-2);
-		/* box-sizing: border-box; */
+		background: var(--sk-back-6);
 		box-sizing: content-box;
 	}
 
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index e20ecf50a1..2cd968d3e3 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -31,7 +31,7 @@
 		padding: 0 10px;
 		font-family: var(--sk-font-family-mono);
 		font-size: 13px;
-		color: var(--sk-text-2, #999);
+		color: var(--sk-text-2);
 		line-height: 1.8;
 	}
 
@@ -39,7 +39,7 @@
 		display: block;
 		padding: 0 0 0 1.25em;
 		white-space: nowrap;
-		color: var(--sk-text-3, #999);
+		color: var(--sk-text-3);
 		user-select: none;
 	}
 
@@ -49,13 +49,9 @@
 	}
 
 	.string {
-		color: hsl(41, 37%, 45%);
+		color: var(--sk-code-string);
 	}
 
-	/* .boolean {
-		color: hsl(45, 7%, 45%);
-	} */
-
 	label {
 		display: inline-block;
 	}
@@ -88,11 +84,6 @@
 		opacity: 1;
 	}
 
-	/* input[type=radio]:focus + label {
-		color: #00f;
-		outline: 1px dotted #00f;
-	} */
-
 	input[type='radio'] + label:before {
 		content: '';
 		background: #eee;
@@ -110,16 +101,16 @@
 	}
 
 	input[type='radio'] + label:before {
-		background-color: var(--sk-theme-2);
+		background-color: var(--sk-text-4);
 		border-radius: 100%;
 		box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-theme-2);
+		border: 1px solid var(--sk-text-4);
 	}
 
 	input[type='radio']:checked + label:before {
 		background-color: var(--sk-theme-1);
 		box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-theme-2);
+		border: 1px solid var(--sk-text-4);
 		transition: box-shadow 0.2s ease-out;
 	}
 </style>
diff --git a/packages/repl/src/lib/theme.ts b/packages/repl/src/lib/theme.ts
index 10d5ce9196..6bf7b0c973 100644
--- a/packages/repl/src/lib/theme.ts
+++ b/packages/repl/src/lib/theme.ts
@@ -58,10 +58,6 @@ const svelteThemeStyles = EditorView.theme(
 		'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
 		'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
 
-		'.cm-searchMatch': {
-			backgroundColor: 'var(--sk-theme-2)'
-			// outline: '1px solid #457dff',
-		},
 		'.cm-searchMatch.cm-searchMatch-selected': {
 			backgroundColor: '#6199ff2f'
 		},
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index b787877a34..ce0b5aaceb 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -288,11 +288,6 @@
 					text-decoration: none;
 				}
 
-				/* TODO what is this for? */
-				&.border {
-					border-left: 5px solid var(--sk-theme-2);
-				}
-
 				.highlight {
 					--color: rgba(220, 220, 0, 0.2);
 					background: var(--color);

From 45d2448cb02e0d7853b6e23650f45b4ccb0e45c6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Oct 2024 17:18:06 -0400
Subject: [PATCH 4/5] remove unused components

---
 .../src/lib/components/ScreenToggle.svelte    | 42 -----------
 .../src/lib/components/ToggleButton.svelte    | 72 -------------------
 2 files changed, 114 deletions(-)
 delete mode 100644 apps/svelte.dev/src/lib/components/ScreenToggle.svelte
 delete mode 100644 packages/site-kit/src/lib/components/ToggleButton.svelte

diff --git a/apps/svelte.dev/src/lib/components/ScreenToggle.svelte b/apps/svelte.dev/src/lib/components/ScreenToggle.svelte
deleted file mode 100644
index a3db762b64..0000000000
--- a/apps/svelte.dev/src/lib/components/ScreenToggle.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-	export let labels;
-	export let offset = 0;
-</script>
-
-<div class="toggle">
-	{#each labels as label, index}
-		<button class:selected={offset === index} on:click={() => (offset = index)}>
-			{label}
-		</button>
-	{/each}
-</div>
-
-<style>
-	.toggle {
-		position: fixed;
-		bottom: var(--sk-nav-height);
-		width: 100%;
-		height: 4.6rem;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		border-top: 1px solid var(--sk-theme-2);
-		background-color: var(--sk-back-4);
-	}
-
-	button {
-		margin: 0 0.15em;
-		width: 4em;
-		height: 1em;
-		padding: 0.3em 0.4em;
-		border-radius: var(--sk-border-radius);
-		box-sizing: content-box;
-		color: var(--sk-text-3);
-		border: 1px solid var(--sk-back-3);
-	}
-
-	.selected {
-		background-color: var(--sk-theme-1);
-		color: white;
-	}
-</style>
diff --git a/packages/site-kit/src/lib/components/ToggleButton.svelte b/packages/site-kit/src/lib/components/ToggleButton.svelte
deleted file mode 100644
index 6baacee54b..0000000000
--- a/packages/site-kit/src/lib/components/ToggleButton.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-	let {
-		pressed = $bindable(),
-		label
-	}: {
-		pressed: boolean;
-		label: string;
-	} = $props();
-</script>
-
-<button aria-pressed={pressed} aria-label={label} onclick={() => (pressed = !pressed)}></button>
-
-<style>
-	button {
-		--size: 1em;
-		--bg: var(--sk-theme-2);
-		--fg: white;
-		--bg-active: var(--bg);
-		--fg-active: var(--fg);
-		position: relative;
-		height: var(--size);
-		width: calc(100% - 0.6em);
-		max-width: calc(2 * var(--size));
-		border-radius: 0.5em;
-		-webkit-appearance: none;
-		appearance: none;
-		outline-offset: 2px;
-		border: transparent;
-	}
-
-	button::before {
-		content: '';
-		position: absolute;
-		display: block;
-		height: 100%;
-		width: 100%;
-		padding: 2px;
-		border-radius: var(--size);
-		top: 0;
-		left: 0;
-		background: var(--bg);
-		box-sizing: border-box;
-	}
-
-	button[aria-pressed='true']::before {
-		background: var(--bg-active);
-	}
-
-	button::after {
-		content: '';
-		position: absolute;
-		display: block;
-		width: calc(var(--size) - 4px);
-		height: calc(var(--size) - 4px);
-		aspect-ratio: 1;
-		top: 2px;
-		left: 2px;
-		border-radius: 50%;
-		background: var(--fg);
-		box-shadow:
-			0 0px 1px rgba(0, 0, 0, 0.4),
-			0 4px 2px rgba(0, 0, 0, 0.1);
-		transition:
-			background 0.2s ease-out,
-			left 0.2s ease-out;
-	}
-
-	button[aria-pressed='true']::after {
-		background: var(--fg-active);
-		left: calc(100% - var(--size) + 2px);
-	}
-</style>

From 8bce3ebdcd7ce9e2f20070876b9cd5804d25ae03 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Oct 2024 18:08:52 -0400
Subject: [PATCH 5/5] remove theme-2

---
 .../(authed)/playground/[id]/+page.svelte     |  1 -
 .../playground/[id]/embed/+page.svelte        |  1 -
 .../routes/tutorial/[...slug]/+page.svelte    | 14 ++--
 .../tutorial/[...slug]/ScreenToggle.svelte    | 56 -------------
 .../tutorial/[...slug]/ToggleButton.svelte    | 82 -------------------
 packages/repl/src/lib/Message.svelte          |  2 +-
 .../src/lib/Output/CompilerOptions.svelte     |  2 +-
 packages/repl/src/lib/Output/Output.svelte    |  4 +-
 .../repl/src/lib/Output/PaneWithPanel.svelte  |  2 +-
 packages/repl/src/lib/Repl.svelte             | 15 ++--
 .../src/lib/components}/Checkbox.svelte       |  7 +-
 .../src/lib/components/ScreenToggle.svelte}   | 30 +++++--
 packages/site-kit/src/lib/components/index.ts |  2 +
 packages/site-kit/src/lib/styles/tokens.css   |  3 +-
 14 files changed, 51 insertions(+), 170 deletions(-)
 delete mode 100644 apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
 delete mode 100644 apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
 rename packages/{repl/src/lib => site-kit/src/lib/components}/Checkbox.svelte (83%)
 rename packages/{repl/src/lib/InputOutputToggle.svelte => site-kit/src/lib/components/ScreenToggle.svelte} (52%)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 84e07d56db..263d8e2de5 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -168,7 +168,6 @@
 
 <style>
 	.repl-outer {
-		--pane-controls-h: 4.2rem;
 		position: relative;
 		height: calc(100% - var(--sk-nav-height) - var(--sk-banner-bottom-height));
 		height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index 50d2a85163..6e6971e6d2 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -71,7 +71,6 @@
 		background-color: var(--sk-back-1);
 		overflow: hidden;
 		box-sizing: border-box;
-		--pane-controls-h: 4.2rem;
 		display: flex;
 		flex-direction: column;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 79e8fdd490..4a1936b496 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -7,7 +7,7 @@
 	import Filetree from './filetree/Filetree.svelte';
 	import ImageViewer from './ImageViewer.svelte';
 	import Output from './Output.svelte';
-	import ScreenToggle from './ScreenToggle.svelte';
+	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import Sidebar from './Sidebar.svelte';
 	import {
 		create_directories,
@@ -323,8 +323,10 @@
 
 	<div class="screen-toggle">
 		<ScreenToggle
-			on:change={(e) => {
-				show_editor = e.detail.pressed;
+			left="show text"
+			right="show editor"
+			onchange={(checked) => {
+				show_editor = checked;
 
 				const url = new URL(location.origin + location.pathname);
 
@@ -332,9 +334,9 @@
 					url.searchParams.set('file', $selected_name ?? '');
 				}
 
-				history.pushState({}, '', url);
+				history.pushState({}, '', url); // TODO use SvelteKit pushState
 			}}
-			pressed={show_editor}
+			checked={show_editor}
 		/>
 	</div>
 </div>
@@ -366,7 +368,7 @@
 	}
 
 	.screen-toggle {
-		height: 4.6rem;
+		height: var(--sk-pane-controls-height);
 	}
 
 	.content {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
deleted file mode 100644
index c1343fa7ee..0000000000
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-	import ToggleButton from './ToggleButton.svelte';
-
-	/** @type {boolean} */
-	export let pressed = false;
-
-	const dispatch = createEventDispatcher();
-</script>
-
-<div class="input-output-toggle">
-	<button
-		aria-hidden="true"
-		on:click={() => {
-			if (pressed) {
-				pressed = false;
-				dispatch('change', { pressed });
-			}
-		}}>Tutorial</button
-	>
-	<ToggleButton label="Show editor" {pressed} on:change />
-	<button
-		aria-hidden="true"
-		on:click={() => {
-			if (!pressed) {
-				pressed = true;
-				dispatch('change', { pressed });
-			}
-		}}>Editor</button
-	>
-</div>
-
-<style>
-	.input-output-toggle {
-		position: relative;
-		display: flex;
-		gap: 0.5em;
-		user-select: none;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		z-index: 2;
-		margin: 0 auto;
-		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.07);
-		font: var(--sk-font-ui-small);
-	}
-
-	@media (min-width: 832px) {
-		.input-output-toggle {
-			padding-left: 3.2rem;
-			width: var(--sidebar-menu-width);
-			margin: 0 0 0 auto;
-		}
-	}
-</style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
deleted file mode 100644
index 357ca88839..0000000000
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<!-- TODO this is copied from kit.svelte.dev — probably belongs in site-kit -->
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	/** @type {string} */
-	export let label;
-
-	export let pressed = false;
-
-	const dispatch = createEventDispatcher();
-</script>
-
-<button
-	aria-pressed={pressed ? 'true' : 'false'}
-	on:click={() => {
-		pressed = !pressed;
-		dispatch('change', { pressed });
-	}}
->
-	<span class="visually-hidden">{label}</span>
-</button>
-
-<style>
-	button {
-		--size: 1em;
-		--bg: var(--sk-theme-2);
-		--fg: white;
-		--bg-active: var(--bg);
-		--fg-active: var(--fg);
-		position: relative;
-		height: var(--size);
-		width: calc(100% - 0.6em);
-		max-width: calc(2 * var(--size));
-		border-radius: 0.5em;
-		-webkit-appearance: none;
-		appearance: none;
-		outline-offset: 2px;
-		border: transparent;
-	}
-
-	button::before {
-		content: '';
-		position: absolute;
-		display: block;
-		height: 100%;
-		width: 100%;
-		padding: 2px;
-		border-radius: var(--size);
-		top: 0;
-		left: 0;
-		background: var(--bg);
-		box-sizing: border-box;
-	}
-
-	button[aria-pressed='true']::before {
-		background: var(--bg-active);
-	}
-
-	button::after {
-		content: '';
-		position: absolute;
-		display: block;
-		width: calc(var(--size) - 4px);
-		height: calc(var(--size) - 4px);
-		aspect-ratio: 1;
-		top: 2px;
-		left: 2px;
-		border-radius: 50%;
-		background: var(--fg);
-		box-shadow:
-			0 0px 1px rgba(0, 0, 0, 0.4),
-			0 4px 2px rgba(0, 0, 0, 0.1);
-		transition:
-			background 0.2s ease-out,
-			left 0.2s ease-out;
-	}
-
-	button[aria-pressed='true']::after {
-		background: var(--fg-active);
-		left: calc(100% - var(--size) + 2px);
-	}
-</style>
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index f0f8feb9c6..baf84b65f9 100644
--- a/packages/repl/src/lib/Message.svelte
+++ b/packages/repl/src/lib/Message.svelte
@@ -93,6 +93,6 @@
 	}
 
 	.info {
-		background-color: var(--sk-theme-2);
+		background-color: var(--sk-text-4);
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index 2cd968d3e3..306af49460 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { get_repl_context } from '../context';
-	import Checkbox from '../Checkbox.svelte';
+	import { Checkbox } from '@sveltejs/site-kit/components';
 
 	const { compile_options } = get_repl_context();
 </script>
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 4f4fe58a9f..ecc8fb86f2 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -108,7 +108,7 @@
 
 <style>
 	.view-toggle {
-		height: var(--pane-controls-h);
+		height: var(--sk-pane-controls-height);
 		overflow: hidden;
 		white-space: nowrap;
 		box-sizing: border-box;
@@ -150,7 +150,7 @@
 	.tab-content {
 		position: absolute;
 		width: 100%;
-		height: calc(100% - var(--pane-controls-h)) !important;
+		height: calc(100% - var(--sk-pane-controls-height)) !important;
 		visibility: hidden;
 		pointer-events: none;
 	}
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 5941eb149d..2fd61c030b 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -56,7 +56,7 @@
 
 <style>
 	.panel-header {
-		height: var(--pane-controls-h);
+		height: var(--sk-pane-controls-height);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index ea804e9ace..a99cbd4f31 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { EditorState } from '@codemirror/state';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
+	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import { BROWSER } from 'esm-env';
 	import { derived, writable } from 'svelte/store';
 	import Bundler from './Bundler.js';
 	import ComponentSelector from './Input/ComponentSelector.svelte';
 	import ModuleEditor from './Input/ModuleEditor.svelte';
-	import InputOutputToggle from './InputOutputToggle.svelte';
 	import Output from './Output/Output.svelte';
 	import { set_repl_context } from './context.js';
 	import { get_full_filename } from './utils.js';
@@ -326,13 +326,12 @@
 	</div>
 
 	{#if $toggleable}
-		<InputOutputToggle bind:checked={show_output} />
+		<ScreenToggle bind:checked={show_output} />
 	{/if}
 </div>
 
 <style>
 	.container {
-		--pane-controls-h: 4.2rem;
 		position: relative;
 		flex: 1;
 		background: var(--sk-back-1);
@@ -345,7 +344,7 @@
 		:global {
 			section {
 				position: relative;
-				padding: var(--pane-controls-h) 0 0 0;
+				padding: var(--sk-pane-controls-height) 0 0 0;
 				height: 100%;
 				box-sizing: border-box;
 
@@ -354,7 +353,7 @@
 					top: 0;
 					left: 0;
 					width: 100%;
-					height: var(--pane-controls-h);
+					height: var(--sk-pane-controls-height);
 					box-sizing: border-box;
 				}
 
@@ -369,8 +368,8 @@
 			}
 
 			[data-pane='main'] > .divider::after {
-				height: calc(100% - var(--pane-controls-h));
-				top: var(--pane-controls-h);
+				height: calc(100% - var(--sk-pane-controls-height));
+				top: var(--sk-pane-controls-height);
 			}
 		}
 	}
@@ -381,7 +380,7 @@
 
 	.toggleable .viewport {
 		width: 200%;
-		height: calc(100% - var(--pane-controls-h));
+		height: calc(100% - var(--sk-pane-controls-height));
 		transition: transform 0.3s;
 	}
 
diff --git a/packages/repl/src/lib/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
similarity index 83%
rename from packages/repl/src/lib/Checkbox.svelte
rename to packages/site-kit/src/lib/components/Checkbox.svelte
index 9beac06ccd..34033cbf24 100644
--- a/packages/repl/src/lib/Checkbox.svelte
+++ b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-	let { checked = $bindable() }: { checked: boolean } = $props();
+	let {
+		checked = $bindable(),
+		onchange
+	}: { checked: boolean; onchange?: (value: boolean) => void } = $props();
 </script>
 
-<input type="checkbox" bind:checked />
+<input type="checkbox" bind:checked onchange={(e) => onchange?.(e.currentTarget.checked)} />
 
 <style>
 	input[type='checkbox'] {
diff --git a/packages/repl/src/lib/InputOutputToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte
similarity index 52%
rename from packages/repl/src/lib/InputOutputToggle.svelte
rename to packages/site-kit/src/lib/components/ScreenToggle.svelte
index 816f5794b1..ae0efb46c3 100644
--- a/packages/repl/src/lib/InputOutputToggle.svelte
+++ b/packages/site-kit/src/lib/components/ScreenToggle.svelte
@@ -1,16 +1,32 @@
 <script lang="ts">
 	import Checkbox from './Checkbox.svelte';
 
-	let { checked = $bindable() }: { checked: boolean } = $props();
+	let {
+		left = 'input',
+		right = 'output',
+		checked = $bindable(),
+		onchange
+	}: {
+		left?: string;
+		right?: string;
+		checked: boolean;
+		onchange?: (checked: boolean) => void;
+	} = $props();
 </script>
 
 <!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="input-output-toggle">
-	<span class:active={!checked} style="text-align: right">input</span>
+	<span class:active={!checked} style="text-align: right">{left}</span>
 	<span style="display:grid; place-items: center">
-		<Checkbox bind:checked />
+		<Checkbox
+			{checked}
+			onchange={(value) => {
+				checked = value;
+				onchange?.(checked);
+			}}
+		/>
 	</span>
-	<span class:active={checked}>output</span>
+	<span class:active={checked}>{right}</span>
 </label>
 
 <style>
@@ -19,12 +35,12 @@
 		display: grid;
 		user-select: none;
 		flex: 0;
-		grid-template-columns: 1fr 40px 1fr;
-		grid-gap: 0.5em;
+		grid-template-columns: 1fr 4rem 1fr;
+		grid-gap: 0.5rem;
 		align-items: center;
 		justify-content: center;
 		width: 100%;
-		height: var(--pane-controls-h);
+		height: var(--sk-pane-controls-height);
 		border-top: 1px solid var(--sk-back-5);
 		font: var(--sk-font-ui-small);
 		z-index: 2;
diff --git a/packages/site-kit/src/lib/components/index.ts b/packages/site-kit/src/lib/components/index.ts
index 78ccf8d20d..8f1340eae3 100644
--- a/packages/site-kit/src/lib/components/index.ts
+++ b/packages/site-kit/src/lib/components/index.ts
@@ -1,8 +1,10 @@
 export { default as Banners, defineBanner, fetchBanner } from './Banners.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
 export { default as Dropdown } from './Dropdown.svelte';
 export { default as HoverMenu } from './HoverMenu.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Icons } from './Icons.svelte';
+export { default as ScreenToggle } from './ScreenToggle.svelte';
 export { default as Section } from './Section.svelte';
 export { default as Shell } from './Shell.svelte';
 export { default as Text } from './Text.svelte';
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index f1ffccec25..d2c6ded272 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -21,6 +21,7 @@
 	--sk-border-radius: 0.4rem;
 	--sk-page-content-width: 84rem;
 	--sk-banner-bottom-height: 0px;
+	--sk-pane-controls-height: 4.2rem;
 
 	/* typography (prefer `font: --sk-font-{x}` over `font-family` and `font-size` rules */
 	--sk-font-family-ui: 'Fira Sans', -apple-system, sans-serif;
@@ -52,7 +53,6 @@
 	--sk-theme-1-hsl: 12, 93%, 43%;
 
 	--sk-theme-1: hsl(var(--sk-theme-1-hsl));
-	--sk-theme-2: hsl(240, 8%, 44%);
 
 	--sk-back-1: hsl(0, 0%, 100%);
 	--sk-back-2: hsl(0, 0%, 100%);
@@ -123,7 +123,6 @@
 		--sk-back-6: hsl(0 0 32);
 		--sk-back-translucent: hsl(0 0 100 / 0.1);
 		--sk-theme-1-hsl: 12, 94%, 62%;
-		--sk-theme-2: hsl(240, 8%, 44%);
 		--sk-text-1: hsl(0, 0%, 90%);
 		--sk-text-2: hsl(0, 0%, 80%);
 		--sk-text-3: hsl(0, 0%, 65%);