font switcher (#604)

* font switcher

* Update packages/site-kit/src/lib/styles/tokens.css

* Update packages/site-kit/src/lib/components/FontDropdown.svelte

* fix

* use atkinson hyperlegible

* icons

* make it a two-way toggle

* tidy up

* oops

* tidy up

---------

Co-authored-by: Simon H <[email protected]>

Author: Rich-Harris

apps/svelte.dev/src/app.html

@@ -23,6 +23,10 @@
 				JSON.parse(localStorage.getItem('svelte:theme'))?.current ??
 					(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
 			);
+
+			document.documentElement.classList.add(
+				`font-${localStorage.getItem('svelte:font') ?? 'elegant'}`
+			);
 		</script>
 
 		%sveltekit.head%

packages/repl/src/lib/Output/Output.svelte

@@ -149,6 +149,7 @@
 		overflow: hidden;
 		white-space: nowrap;
 		box-sizing: border-box;
+		font: var(--sk-font-ui-small);
 
 		/* fake border (allows tab borders to appear above it) */
 		&::before {

packages/site-kit/package.json

@@ -22,7 +22,6 @@
 	},
 	"homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/site-kit#readme",
 	"dependencies": {
-		"@lezer/common": "^1.0.4",
 		"@codemirror/autocomplete": "^6.9.0",
 		"@codemirror/commands": "^6.2.5",
 		"@codemirror/lang-css": "^6.2.1",
@@ -33,16 +32,18 @@
 		"@codemirror/search": "^6.5.2",
 		"@codemirror/state": "^6.2.1",
 		"@codemirror/view": "^6.17.1",
+		"@fontsource/atkinson-hyperlegible": "^5.1.0",
 		"@fontsource/dm-serif-display": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
 		"@fontsource/fira-sans": "^5.1.0",
+		"@lezer/common": "^1.0.4",
+		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@shikijs/twoslash": "^1.22.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
 		"shiki": "^1.22.0",
-		"svelte-persisted-store": "^0.9.2",
-		"@replit/codemirror-lang-svelte": "^6.0.0"
+		"svelte-persisted-store": "^0.9.2"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.6.3",

packages/site-kit/src/lib/components/FontToggle.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	let font = $state('elegant');
+
+	$effect(() => {
+		font = localStorage.getItem('svelte:font') ?? 'elegant';
+	});
+
+	function toggle() {
+		font = font === 'elegant' ? 'boring' : 'elegant';
+
+		document.documentElement.classList.remove('font-elegant');
+		document.documentElement.classList.remove('font-boring');
+
+		document.documentElement.classList.add(`font-${font}`);
+		localStorage.setItem('svelte:font', font);
+	}
+</script>
+
+<button
+	onclick={toggle}
+	class="raised icon"
+	type="button"
+	aria-pressed={font === 'boring'}
+	aria-label="Toggle font"
+></button>
+
+<style>
+	button {
+		background-size: 2rem;
+	}
+
+	button[aria-pressed='true'] {
+		background-image: url(../icons/font-boring-light.svg);
+
+		:global(.dark) & {
+			background-image: url(../icons/font-boring-dark.svg);
+		}
+	}
+
+	button[aria-pressed='false'] {
+		background-image: url(../icons/font-elegant-light.svg);
+
+		:global(.dark) & {
+			background-image: url(../icons/font-elegant-dark.svg);
+		}
+	}
+</style>

packages/site-kit/src/lib/components/Icons.svelte

@@ -195,5 +195,14 @@ Provides a list of svg icons that can be referenced through the `Icon` component
 				d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Z"
 			/>
 		</symbol>
+
+		<symbol viewBox="0 0 24 24" id="font-toggle">
+			<g stroke="currentColor">
+				<path d="m3 15 4-8 4 8" />
+				<path d="M4 13h6" />
+				<circle cx="18" cy="12" r="3" />
+				<path d="M21 9v6" />
+			</g>
+		</symbol>
 	</svg>
 </div>