more

Rich-Harris · Rich-Harris · commit 2fe83768c4f0 · 2024-10-03T14:44:45.000-04:00
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/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;
diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/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-small);
 	}
 
 	.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-small);
 		color: var(--sk-text-3);
 		text-align: center;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Features.svelte b/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-tiny);
+		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);
 		}
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -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;
diff --git a/apps/svelte.dev/src/routes/_home/Showcase.svelte b/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));
 	}
 
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -70,10 +70,6 @@
 </Section>
 
 <style>
-	p {
-		font-size: var(--sk-text-s);
-	}
-
 	.definition {
 		display: flex;
 		align-items: baseline;
@@ -93,12 +89,11 @@
 
 			.adjective {
 				position: relative;
-				/* top: -0.15em; */
 				padding: 0.25em 0.5em 0.1em;
 				line-height: 1;
 				margin: 0 1em;
 				text-transform: uppercase;
-				font-size: var(--sk-text-s);
+				font-size: var(--sk-font-size-ui-small);
 				background: var(--sk-text-2);
 				border-radius: var(--sk-border-radius);
 				font-family: var(--sk-font-ui);
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -54,7 +54,7 @@
 			content: 'Latest post • ' attr(data-pubdate);
 			color: var(--sk-text-4);
 			font-family: var(--sk-font-ui);
-			font-size: var(--sk-text-xs);
+			font-size: var(--sk-font-size-ui-tiny);
 			font-weight: 400;
 			text-transform: uppercase;
 		}
@@ -84,7 +84,7 @@
 		}
 
 		p {
-			font-size: var(--sk-text-s);
+			font-size: var(--sk-font-size-body-small);
 			color: var(--sk-text-3);
 			margin: 0;
 		}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -56,7 +56,7 @@
 	}
 
 	.standfirst {
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-body-small);
 		color: var(--sk-text-3);
 		margin: 0 0 1em 0;
 	}
@@ -65,7 +65,7 @@
 		margin: 0 0 4rem 0;
 		padding: 1rem 0 0 0;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-xs);
+		font-size: var(--sk-font-size-ui-tiny);
 		text-transform: uppercase;
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -60,15 +60,15 @@
 	<div>
 		<h2>Svelte</h2>
 		<p>Svelte is a compiler-based framework for creating fast and efficient UIs.</p>
-		<a class="cta basic" href="/docs/svelte">read the docs</a>
+		<a href="/docs/svelte">read the docs</a>
 	</div>
 	<div>
 		<h2>SvelteKit</h2>
 		<p>
 			SvelteKit is a framework for rapidly developing robust, performant web applications using
 			Svelte
 		</p>
-		<a class="cta basic" href="/docs/kit">read the docs</a>
+		<a href="/docs/kit">read the docs</a>
 	</div>
 </div>
 
@@ -86,34 +86,4 @@
 			max-width: 50rem;
 		}
 	}
-
-	/* Copied from Hero.svelte - if we keep this design, deduplicate */
-	.cta {
-		display: flex;
-		align-items: center;
-		gap: 0.1rem;
-		background: var(--sk-theme-1);
-		padding: 0.35em 0.8em;
-		font-size: var(--sk-text-s);
-		letter-spacing: 0.05em;
-		font-weight: 600;
-		white-space: nowrap;
-		border-radius: var(--sk-border-radius);
-		box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
-		color: #fff;
-		transition: 0.5s var(--quint-out);
-		transition-property: box-shadow, color;
-	}
-
-	.cta:hover {
-		text-decoration: none;
-		box-shadow:
-			0px 0.8px 3.8px rgba(0, 0, 0, 0.115),
-			0px 6px 30px rgba(0, 0, 0, 0.23);
-	}
-
-	.cta.basic {
-		background-color: var(--sk-back-5);
-		color: var(--sk-text-1);
-	}
 </style>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -108,7 +108,7 @@
 
 	.controls span {
 		display: block;
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui);
 		text-transform: uppercase;
 		font-weight: 400;
 		font-family: var(--sk-font-ui);
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
@@ -11,7 +11,7 @@
 <style>
 	.breadcrumbs {
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-xs);
+		font-size: var(--sk-font-size-ui-tiny);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
 		line-height: 1.35;
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -78,7 +78,8 @@
 		}
 
 		label {
-			font-family: var(--sk-font-heading);
+			font-family: var(--sk-font-ui);
+			font-size: var(--sk-font-size-ui-tiny);
 			display: block;
 		}
 
@@ -98,7 +99,6 @@
 				background-size: 2rem 2rem;
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
-				font-size: var(--sk-text-xs);
 				text-transform: uppercase;
 				color: var(--sk-text-4);
 
@@ -158,9 +158,8 @@
 			}
 
 			& label {
+				font-family: var(--sk-font-heading);
 				font-size: var(--sk-font-size-h3);
-
-				font-weight: 500;
 				display: block;
 
 				&::before {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -173,6 +173,7 @@
 	header {
 		position: relative;
 		/* z-index: 2; */
+		font-family: var(--sk-font-ui);
 
 		display: grid;
 		grid-template-columns: 4rem minmax(0, 1fr) 4rem;
@@ -191,11 +192,12 @@
 
 	header strong,
 	h1 {
-		font-size: var(--sk-text-s);
+		font-family: inherit;
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	.menu {
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		border: none;
 	}
 
@@ -251,7 +253,6 @@
 		text-align: center;
 		color: var(--sk-text-2);
 		font-weight: 400;
-		font-size: var(--sk-text-s);
 	}
 
 	h1 .desktop {
@@ -264,10 +265,6 @@
 		display: none;
 	}
 
-	/* .expand-icon {
-		padding: 0.5rem;
-	} */
-
 	.expand-icon :global(svg) {
 		transition: transform 0.4s var(--quint-out);
 		transform-origin: center;
@@ -457,7 +454,7 @@
 		}
 
 		h1 strong {
-			font-size: var(--sk-text-s) !important;
+			font-size: var(--sk-font-size-ui-small) !important;
 			line-height: 1;
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -198,7 +198,7 @@
 	footer .edit {
 		color: var(--sk-text-2);
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		padding: 0 0 0 1.4em;
 		background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
 		background-size: 1em 1em;
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -179,7 +179,7 @@
 
 <style>
 	.filetree {
-		--font-size: var(--sk-text-s);
+		--font-size: var(--sk-font-size-ui-small);
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
@@ -121,7 +121,6 @@
 		background-position: 0 45%;
 		background-repeat: no-repeat;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-s);
 	}
 
 	:focus-visible {
diff --git a/packages/repl/src/routes/+page.svelte b/packages/repl/src/routes/+page.svelte
@@ -32,5 +32,6 @@
 
 	main {
 		height: 100vh;
+		overflow-x: hidden;
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
@@ -83,8 +83,4 @@ The main shell of the application. It provides a slot for the top navigation, th
 			padding-bottom: 0;
 		}
 	}
-
-	:global(body) {
-		font-size: var(--sk-text-s) !important;
-	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
@@ -234,7 +234,6 @@
 				box-sizing: border-box;
 				color: var(--sk-code-base);
 				border-radius: var(--sk-border-radius);
-				font-size: var(--sk-text-s);
 				overflow-x: auto;
 
 				code {
@@ -354,7 +353,7 @@
 		}
 
 		small {
-			font-size: var(--sk-text-s);
+			font-size: var(--sk-font-size-body-small);
 			float: right;
 			pointer-events: all;
 			color: var(--sk-theme-1);
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -101,7 +101,7 @@
 
 	.page {
 		display: block;
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-body-small);
 		font-family: var(--sk-font-body);
 	}
 
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte
@@ -66,7 +66,7 @@
 
 	.links a {
 		color: var(--sk-text-2);
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-body-small);
 		display: block;
 		line-height: 1.8;
 	}
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
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
`@@ -145,7 +145,8 @@`
`145`	`145`	`left: 0;`
`146`	`146`	`width: 100%;`
`147`	`147`	`color: var(--sk-text-3);`
`148`		`- font-size: var(--sk-text-xs);`
	`148`	`+ font-family: var(--sk-font-ui);`
	`149`	`+ font-size: var(--sk-font-size-ui-small);`
`149`	`150`	`}`
`150`	`151`
`151`	`152`	`.globe span::before {`
`@@ -180,7 +181,8 @@`
`180`	`181`	`}`
`181`	`182`
`182`	`183`	`.platforms a span {`
`183`		`- font-size: var(--sk-text-xs);`
	`184`	`+ font-family: var(--sk-font-ui);`
	`185`	`+ font-size: var(--sk-font-size-ui-small);`
`184`	`186`	`color: var(--sk-text-3);`
`185`	`187`	`text-align: center;`
`186`	`188`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,8 +39,6 @@`
`39`	`39`	`h2 {`
`40`	`40`	`color: white;`
`41`	`41`	`margin-bottom: 1em;`
`42`		`- text-transform: uppercase;`
`43`		`- font-size: var(--sk-text-s);`
`44`	`42`	`text-align: center;`
`45`	`43`	`}`
`46`	`44`
`@@ -81,7 +79,6 @@`
`81`	`79`	`backdrop-filter: blur(3px);`
`82`	`80`	`opacity: 0;`
`83`	`81`	`transition: opacity 0.2s;`
`84`		`- font-size: var(--sk-text-s);`
`85`	`82`	`filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.5));`
`86`	`83`	`}`
`87`	`84`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@`
`54`	`54`	`content: 'Latest post • ' attr(data-pubdate);`
`55`	`55`	`color: var(--sk-text-4);`
`56`	`56`	`font-family: var(--sk-font-ui);`
`57`		`- font-size: var(--sk-text-xs);`
	`57`	`+ font-size: var(--sk-font-size-ui-tiny);`
`58`	`58`	`font-weight: 400;`
`59`	`59`	`text-transform: uppercase;`
`60`	`60`	`}`
`@@ -84,7 +84,7 @@`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`p {`
`87`		`- font-size: var(--sk-text-s);`
	`87`	`+ font-size: var(--sk-font-size-body-small);`
`88`	`88`	`color: var(--sk-text-3);`
`89`	`89`	`margin: 0;`
`90`	`90`	`}`
Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`.standfirst {`
`59`		`- font-size: var(--sk-text-s);`
	`59`	`+ font-size: var(--sk-font-size-body-small);`
`60`	`60`	`color: var(--sk-text-3);`
`61`	`61`	`margin: 0 0 1em 0;`
`62`	`62`	`}`
`@@ -65,7 +65,7 @@`
`65`	`65`	`margin: 0 0 4rem 0;`
`66`	`66`	`padding: 1rem 0 0 0;`
`67`	`67`	`font-family: var(--sk-font-ui);`
`68`		`- font-size: var(--sk-text-xs);`
	`68`	`+ font-size: var(--sk-font-size-ui-tiny);`
`69`	`69`	`text-transform: uppercase;`
`70`	`70`	`}`
`71`	`71`