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/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",
@@ -37,12 +36,14 @@
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
 		"@fontsource/fira-sans": "^5.1.0",
+		"@fontsource/opendyslexic": "^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/Dropdown.svelte

@@ -4,14 +4,15 @@
 	let {
 		children,
 		dropdown,
-		align = 'left'
-	}: { children: Snippet; dropdown: Snippet; align?: 'left' | 'right' } = $props();
+		align = 'left',
+		top = false
+	}: { children: Snippet; dropdown: Snippet; align?: 'left' | 'right'; top?: boolean } = $props();
 </script>
 
 <div class="dropdown">
 	{@render children()}
 
-	<nav class="dropdown-content" class:align-right={align === 'right'}>
+	<nav class="dropdown-content" class:align-right={align === 'right'} class:top>
 		{@render dropdown()}
 	</nav>
 </div>
@@ -41,6 +42,11 @@
 			left: auto;
 			right: -1rem;
 		}
+
+		&.top {
+			top: auto;
+			bottom: calc(50% + min(50%, 1.5rem));
+		}
 	}
 
 	.dropdown:hover .dropdown-content,

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import Dropdown from './Dropdown.svelte';
+	import Icon from './Icon.svelte';
+
+	let { top }: { top: boolean } = $props();
+
+	let font = $state('elegant');
+
+	$effect(() => {
+		font = localStorage.getItem('svelte:font') ?? 'elegant';
+	});
+
+	function choose(value: 'elegant' | 'boring' | 'accessible') {
+		console.log('choosing', value);
+
+		font = value;
+
+		document.documentElement.classList.remove('font-elegant');
+		document.documentElement.classList.remove('font-boring');
+		document.documentElement.classList.remove('font-accessible');
+
+		document.documentElement.classList.add(`font-${font}`);
+		localStorage.setItem('svelte:font', font);
+	}
+</script>
+
+<Dropdown align="right" {top}>
+	<div class="icons">
+		<Icon name="font-toggle" />
+		<Icon name="chevron-down" />
+	</div>
+
+	{#snippet dropdown()}
+		<div class="buttons">
+			<button aria-pressed={font === 'elegant'} onclick={() => choose('elegant')}>Serif</button>
+			<button aria-pressed={font === 'boring'} onclick={() => choose('boring')}>Sans-serif</button>
+			<button aria-pressed={font === 'accessible'} onclick={() => choose('accessible')}
+				>Accessible</button
+			>
+		</div>
+	{/snippet}
+</Dropdown>
+
+<style>
+	.icons {
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
+
+	button {
+		display: block;
+		font: var(--sk-font-ui-medium);
+		padding: 1rem 1.3rem;
+		line-height: 1;
+		width: 100%;
+		margin: 0;
+		text-align: left;
+
+		&:hover {
+			background-color: var(--sk-back-4);
+		}
+
+		&:first-child {
+			padding-top: 1.3rem;
+		}
+
+		&:last-child {
+			padding-bottom: 1.3rem;
+		}
+
+		&[aria-pressed='true'] {
+			color: var(--sk-theme-1);
+		}
+	}
+</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 FontDropdown from '../components/FontDropdown.svelte';
 
 	interface Props {
 		home_title?: string;
@@ -130,11 +131,15 @@ Top navigation bar for the application. It provides a slot for the left side, th
 				></a>
 			</div>
 
+			<FontDropdown />
+
 			<ThemeToggle />
 		</div>
 	</div>
 
 	<div class="mobile mobile-menu">
+		<FontDropdown top />
+
 		<button
 			aria-label="Search"
 			class="raised icon search"

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

@@ -6,6 +6,8 @@
 @import '@fontsource/fira-mono/400.css';
 @import '@fontsource/fira-sans/400.css';
 
+@import '@fontsource/opendyslexic/400.css';
+
 @import './tokens.css';
 @import './base.css';
 @import './text.css';

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

@@ -178,6 +178,24 @@
 		--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: system-ui;
+		--sk-font-size-body: 1.8rem;
+
+		p code {
+			font-size: 0.75em;
+		}
+	}
+
+	&.font-accessible {
+		--sk-font-family-body: 'OpenDyslexic';
+		--sk-font-size-body: 1.6rem;
+
+		p code {
+			font-size: 0.9em;
+		}
+	}
 }
 
 @media screen and (min-width: 480px) {