font switcher

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>

packages/site-kit/src/lib/nav/Nav.svelte

@@ -13,6 +13,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import { HoverMenu } from '../components';
 	import Search from '../search/Search.svelte';
 	import { tick } from 'svelte';
+	import FontToggle from '../components/FontToggle.svelte';
 
 	interface Props {
 		home_title?: string;
@@ -130,6 +131,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 				></a>
 			</div>
 
+			<FontToggle />
+
 			<ThemeToggle />
 		</div>
 	</div>
@@ -142,9 +145,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 				$searching = true;
 			}}
 		>
-			<Icon name="search" size={16} />
+			<Icon name="search" size={18} />
 		</button>
 
+		<FontToggle />
+
 		<ThemeToggle />
 
 		<button
@@ -222,6 +227,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
+	button {
+		color: var(--sk-text-3);
+	}
+
 	.links {
 		display: flex;
 		width: 100%;
@@ -262,24 +271,22 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		position: relative;
 		display: flex;
 		width: 100%;
-		gap: 1rem;
+		gap: 0.5rem;
 
 		.external-links {
 			display: flex;
 			height: 100%;
+			margin: 0 0.5rem;
 		}
 	}
 
 	.home-link {
 		--padding-right: 1rem;
-		width: 11.2rem;
+		width: 3.4rem;
 		height: 100%;
-		background: url(../branding/svelte.svg) no-repeat 0 50% / calc(100% - var(--padding-right)) auto;
+		background: url(../branding/svelte-logo.svg) no-repeat 0 50% / calc(100% - var(--padding-right))
+			auto;
 		padding: 0 var(--padding-right) 0 calc(var(--sk-page-padding-side) + 0rem);
-
-		:root.dark & {
-			background-image: url(../branding/svelte-dark.svg);
-		}
 	}
 
 	.mobile-menu {
@@ -317,6 +324,19 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
+	@media (min-width: 480px) {
+		.home-link {
+			width: 11.2rem;
+			background: url(../branding/svelte.svg) no-repeat 0 50% / calc(100% - var(--padding-right))
+				auto;
+			padding: 0 var(--padding-right) 0 calc(var(--sk-page-padding-side) + 0rem);
+
+			:root.dark & {
+				background-image: url(../branding/svelte-dark.svg);
+			}
+		}
+	}
+
 	@media (min-width: 800px) {
 		.home-link {
 			--padding-right: 2rem;

packages/site-kit/src/lib/styles/index.css

@@ -1,6 +1,7 @@
 @import '@fontsource/eb-garamond/400.css';
 @import '@fontsource/eb-garamond/500.css';
 @import '@fontsource/eb-garamond/400-italic.css';
+@import '@fontsource/atkinson-hyperlegible/400.css';
 @import '@fontsource/dm-serif-display/400.css';
 @import '@fontsource/dm-serif-display/400-italic.css';
 @import '@fontsource/fira-mono/400.css';

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

@@ -175,6 +175,16 @@
 		--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
 		--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
 	}
+
+	&.font-boring {
+		--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
+		--sk-font-size-body: 2rem;
+		--sk-font-size-body-small: 1.8rem;
+
+		p code {
+			font-size: 0.75em;
+		}
+	}
 }
 
 @media screen and (min-width: 480px) {