Merge branch 'main' into gh-109

Author: Rich-Harris

apps/svelte.dev/src/app.html

@@ -59,9 +59,9 @@
 				}
 			}
 
-			if (localStorage.getItem('svelte:prefers-ts') !== 'false') {
+			if (localStorage.getItem('svelte:prefers-ts') === 'false') {
 				for (const node of document.querySelectorAll('.ts-toggle')) {
-					node.checked = true;
+					node.checked = false;
 				}
 			}
 		</script>

apps/svelte.dev/src/routes/(authed)/apps/+page.svelte

@@ -247,7 +247,6 @@
 
 	h2 {
 		color: var(--sk-text-2);
-		font-size: var(--sk-text-s);
 		font-weight: 400;
 		overflow: hidden;
 		text-overflow: ellipsis;

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -311,7 +311,6 @@ export default app;`
 		border: none;
 		color: currentColor;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-m);
 		opacity: 0.7;
 		outline: none;
 		flex: 1;

apps/svelte.dev/src/routes/+error.svelte

@@ -25,18 +25,12 @@
 				</p>
 			{:else}
 				<h1>Yikes!</h1>
-				<p>Something went wrong when we tried to render this page.</p>
-				{#if $page.error?.message}
-					<p class="error">{$page.status}: {$page.error.message}</p>
-				{:else}
-					<p class="error">Encountered a {$page.status} error.</p>
-				{/if}
-				<p>Please try reloading the page.</p>
+
+				<p>Something went wrong when we tried to render this page. Please try reloading.</p>
+
 				<p>
-					If the error persists, please drop by the
-					<a href="/chat"> Discord chatroom </a>
-					and let us know, or raise an issue on
-					<a href="https://github.com/sveltejs/sites">GitHub</a>. Thanks!
+					If the error persists, please let us know on <a href="/chat">Discord</a> or
+					<a href="https://github.com/sveltejs/svelte.dev/issues">GitHub</a>. Thanks!
 				</p>
 			{/if}
 		{:else}
@@ -58,7 +52,7 @@
 	}
 
 	.inner {
-		max-width: 50rem;
+		max-width: 48rem;
 		text-align: center;
 		text-wrap: balance;
 
@@ -67,26 +61,12 @@
 		}
 	}
 
-	h1,
-	p {
-		margin: 0 auto;
-	}
-
 	h1 {
-		font-size: 2.8em;
-		font-weight: 300;
+		font-size: var(--sk-font-size-h1);
 		margin: 0 0 0.5em 0;
 	}
 
 	p {
 		margin: 1em auto;
 	}
-
-	.error {
-		background-color: var(--sk-theme-2);
-		color: white;
-		padding: 12px 16px;
-		font: 600 16px/1.7 var(--sk-font-body);
-		border-radius: 2px;
-	}
 </style>

apps/svelte.dev/src/routes/+page.svelte

@@ -120,13 +120,3 @@
 		{/snippet}
 	</Footer>
 </div>
-
-<style>
-	h2 {
-		line-height: 1.05;
-	}
-
-	p {
-		font-size: var(--sk-text-m);
-	}
-</style>

apps/svelte.dev/src/routes/_home/Deployment.svelte

@@ -145,7 +145,8 @@
 		left: 0;
 		width: 100%;
 		color: var(--sk-text-3);
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.globe span::before {
@@ -180,7 +181,8 @@
 	}
 
 	.platforms a span {
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-medium);
 		color: var(--sk-text-3);
 		text-align: center;
 	}

apps/svelte.dev/src/routes/_home/Features.svelte

@@ -34,10 +34,7 @@
 				<strong>Deploy anywhere</strong> with adapters.
 			</p>
 
-			<p>
-				SvelteKit is the framework that
-				<strong>grows with you</strong>, whatever you end up building.
-			</p>
+			<p>SvelteKit is the framework that grows with you, whatever you end up building.</p>
 		</div>
 	</div>
 </Section>
@@ -67,18 +64,19 @@
 
 	.wall {
 		margin: 0;
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-small);
+		color: var(--sk-text-4);
+
+		strong {
+			color: var(--sk-text-1);
+		}
 	}
 
 	p + p {
 		margin-top: 1em;
 	}
 
-	p,
-	strong {
-		color: var(--sk-text-3);
-	}
-
 	@media (min-width: 600px) {
 		h2 {
 			margin-top: 0.5em;
@@ -109,10 +107,6 @@
 			margin-top: 0.1em;
 		}
 
-		p {
-			font-size: var(--sk-text-s);
-		}
-
 		.features {
 			padding-top: clamp(0px, calc(23.333vw - 210px), 70px);
 		}

apps/svelte.dev/src/routes/_home/Hero.svelte

@@ -72,7 +72,7 @@
 	}
 
 	strong {
-		font-size: var(--sk-text-l);
+		font-size: var(--sk-font-size-h2);
 		text-align: center;
 		font-family: var(--sk-font-heading);
 		text-transform: lowercase;
@@ -93,7 +93,7 @@
 		gap: 0.1rem;
 		background: var(--sk-theme-1);
 		padding: 0.35em 0.8em;
-		font-size: var(--sk-text-s);
+		font-family: var(--sk-font-ui);
 		letter-spacing: 0.05em;
 		font-weight: 600;
 		white-space: nowrap;
@@ -142,7 +142,6 @@
 
 		strong {
 			text-align: left;
-			font-size: calc(0.04 * var(--width));
 		}
 
 		.hero {

apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte

@@ -5,7 +5,7 @@
 <section class="hero">
 	<div class="hero-contents">
 		<div class="hero-text">
-			<div class="tagline">Go full-stack with</div>
+			<h3 class="tagline">Go full-stack with</h3>
 			<div class="logotype" role="img" aria-label="SvelteKit">
 				<Logotype />
 			</div>
@@ -78,14 +78,9 @@
 	}
 
 	.hero .tagline {
-		font-size: var(--sk-text-l);
-		font-weight: 200;
-		line-height: 1.2;
+		font-size: var(--sk-font-size-h2);
 		color: var(--sk-text-2);
-		font-family: var(--sk-font-body);
 		margin-bottom: 2rem;
-		/* max-width: 12em; */
-		/* margin: 0 auto; */
 	}
 
 	.logotype :global(svg) {

apps/svelte.dev/src/routes/_home/Showcase.svelte

@@ -39,8 +39,6 @@
 	h2 {
 		color: white;
 		margin-bottom: 1em;
-		text-transform: uppercase;
-		font-size: var(--sk-text-s);
 		text-align: center;
 	}
 
@@ -81,7 +79,6 @@
 		backdrop-filter: blur(3px);
 		opacity: 0;
 		transition: opacity 0.2s;
-		font-size: var(--sk-text-s);
 		filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.5));
 	}