remove theme-2

Rich-Harris · Rich-Harris · commit 8bce3ebdcd7c · 2024-10-15T18:08:52.000-04:00
diff --git 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
@@ -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
@@ -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 {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/site-kit/src/lib/components/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/site-kit/src/lib/components/ScreenToggle.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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,6 @@`
`71`	`71`	`background-color: var(--sk-back-1);`
`72`	`72`	`overflow: hidden;`
`73`	`73`	`box-sizing: border-box;`
`74`		`- --pane-controls-h: 4.2rem;`
`75`	`74`	`display: flex;`
`76`	`75`	`flex-direction: column;`
`77`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -93,6 +93,6 @@`
`93`	`93`	`}`
`94`	`94`
`95`	`95`	`.info {`
`96`		`- background-color: var(--sk-theme-2);`
	`96`	`+ background-color: var(--sk-text-4);`
`97`	`97`	`}`
`98`	`98`	`</style>`