Remove --sk-theme-2 (#411)

* tidy up

* remove some junk

* fix some stuff

* remove unused components

* remove theme-2

Author: Rich-Harris

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.

apps/svelte.dev/src/lib/components/ScreenToggle.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 {

apps/svelte.dev/src/routes/(authed)/apps/+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));

apps/svelte.dev/src/routes/(authed)/playground/[id]/+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;
 	}

apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

@@ -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;
-}

apps/svelte.dev/src/routes/_home/common.css

@@ -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,18 +323,20 @@
 
 	<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);
 
 				if (show_editor) {
 					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 {
@@ -387,30 +389,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 +419,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;

apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte

@@ -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);