more

Rich-Harris · Rich-Harris · commit 30ca23235f88 · 2024-10-03T15:19:10.000-04:00
diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte
@@ -146,7 +146,7 @@
 		width: 100%;
 		color: var(--sk-text-3);
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.globe span::before {
@@ -182,7 +182,7 @@
 
 	.platforms a span {
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		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
@@ -65,7 +65,7 @@
 	.wall {
 		margin: 0;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-tiny);
+		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-4);
 
 		strong {
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -93,7 +93,7 @@
 				line-height: 1;
 				margin: 0 1em;
 				text-transform: uppercase;
-				font-size: var(--sk-font-size-ui-small);
+				font-size: var(--sk-font-size-ui-medium);
 				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-font-size-ui-tiny);
+			font-size: var(--sk-font-size-ui-small);
 			font-weight: 400;
 			text-transform: uppercase;
 		}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -65,7 +65,7 @@
 		margin: 0 0 4rem 0;
 		padding: 1rem 0 0 0;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-tiny);
+		font-size: var(--sk-font-size-ui-small);
 		text-transform: uppercase;
 	}
 
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-font-size-ui);
+		font-size: var(--sk-font-size-ui-medium);
 		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-font-size-ui-tiny);
+		font-size: var(--sk-font-size-ui-small);
 		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
@@ -79,7 +79,7 @@
 
 		label {
 			font-family: var(--sk-font-ui);
-			font-size: var(--sk-font-size-ui-tiny);
+			font-size: var(--sk-font-size-ui-small);
 			display: block;
 		}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
@@ -179,7 +179,7 @@
 	}
 
 	small {
-		font-size: var(--sk-text-xs);
+		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-3);
 		text-transform: uppercase;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -193,11 +193,11 @@
 	header strong,
 	h1 {
 		font-family: inherit;
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.menu {
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		border: none;
 	}
 
@@ -449,12 +449,12 @@
 
 		h1 :where(.part-title, .chapter-title) {
 			grid-row: 2 / span 1;
-			font-size: var(--sk-text-xs);
+			font-size: var(--sk-font-size-ui-small);
 			color: var(--sk-text-3);
 		}
 
 		h1 strong {
-			font-size: var(--sk-font-size-ui-small) !important;
+			font-size: var(--sk-font-size-ui-medium) !important;
 			line-height: 1;
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Output.svelte
@@ -175,8 +175,8 @@
 		bottom: 0;
 		width: 100%;
 		height: 80%;
-		font-family: var(--font-mono);
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-mono);
+		font-size: var(--sk-font-size-ui-small); /* TODO this should use a mono size */
 		padding: 1rem;
 		background: rgba(255, 255, 255, 0.5);
 		transform: translate(0, 100%);
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-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		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-font-size-ui-small);
+		--font-size: var(--sk-font-size-ui-medium);
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte
@@ -272,7 +272,7 @@
 
 	.codemirror-container :global {
 		* {
-			font: 400 var(--sk-text-xs) / 1.7 var(--sk-font-mono);
+			font: 400 var(--sk-font-size-code) / 1.7 var(--sk-font-mono);
 		}
 
 		.mark-text {
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -304,7 +304,7 @@
 	.add-new {
 		position: relative;
 		display: inline-block;
-		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
 		background: var(--sk-back-1);
 		border: none;
 		border-bottom: 3px solid transparent;
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
@@ -15,7 +15,7 @@
 		display: flex;
 		text-transform: uppercase;
 		font-weight: 300;
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -70,7 +70,7 @@
 		display: flex;
 		text-transform: uppercase;
 		font-weight: 300;
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
@@ -46,7 +46,7 @@
 		position: relative;
 		color: white;
 		padding: 12px 16px 12px 44px;
-		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-body);
+		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-body);
 		margin: 0;
 		border-top: 1px solid white;
 	}
diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
@@ -110,6 +110,11 @@
 </li>
 
 <style>
+	* {
+		font-family: var(--sk-font-mono);
+		font-size: var(--sk-font-size-code);
+	}
+
 	ul {
 		padding: 0 0 0 2ch;
 		margin: 0;
@@ -120,13 +125,10 @@
 		background-color: var(--sk-highlight-color);
 	}
 
-	.preview {
-		opacity: 0.8;
-		font-style: italic;
-	}
-
-	button:hover {
-		text-decoration: underline;
+	button {
+		&:hover {
+			text-decoration: underline;
+		}
 	}
 
 	.ast-toggle {
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
@@ -83,7 +83,7 @@
 	code {
 		height: 100%;
 		block-size: 100%;
-		font: 400 var(--sk-text-xs) / 1.7 var(--sk-font-mono);
+		font: 400 var(--sk-font-size-code) / 1.7 var(--sk-font-mono);
 	}
 
 	pre {
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
@@ -118,7 +118,7 @@
 		background: var(--sk-back-1, white);
 		text-align: left;
 		position: relative;
-		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
 		border: none;
 		border-bottom: 3px solid transparent;
 		padding: 12px 12px 8px 12px;
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -69,7 +69,7 @@
 	}
 
 	.panel-heading {
-		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
+		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
 		text-transform: uppercase;
 		color: var(--sk-text-1, #333);
 		flex: 1;
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
@@ -300,7 +300,7 @@
 
 	button {
 		color: var(--sk-text-2, #999);
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		font-family: var(--sk-font-ui);
 		text-transform: uppercase;
 		display: block;
diff --git a/packages/repl/src/routes/+page.svelte b/packages/repl/src/routes/+page.svelte
@@ -32,6 +32,5 @@
 
 	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
@@ -75,6 +75,7 @@ The main shell of the application. It provides a slot for the top navigation, th
 		padding-top: var(--sk-nav-height);
 		padding-bottom: var(--sk-banner-bottom-height);
 		height: 100%;
+		overflow-x: hidden;
 	}
 
 	@media (max-width: 800px) {
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
@@ -437,9 +437,9 @@
 				align-items: center;
 				height: 3rem;
 				color: var(--sk-text-4);
-				font-family: var(--sk-font-heading);
+				font-family: var(--sk-font-ui);
 				font-style: normal;
-				font-size: var(--sk-text-xs);
+				font-size: var(--sk-font-size-ui-small);
 				user-select: none;
 
 				&:hover {
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
@@ -55,7 +55,6 @@
 
 	.terminal pre {
 		padding: 1em;
-		font-size: var(--sk-text-xs);
 	}
 
 	.line::before {
@@ -71,10 +70,4 @@
 	.orange-highlight {
 		color: hsl(15, 100%, 65%);
 	}
-
-	@media (min-width: 440px) {
-		.terminal pre {
-			font-size: var(--sk-font-size-ui);
-		}
-	}
 </style>
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -367,7 +367,7 @@
 		justify-content: start;
 		gap: 1rem;
 
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		color: var(--sk-text-3);
 
 		background-color: var(--sk-back-3);
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -105,7 +105,7 @@
 		padding-bottom: 0.8rem;
 
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		font-weight: 600;
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -344,6 +344,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		kbd {
 			text-transform: uppercase;
+			font-size: var(--sk-font-size-ui-small);
 		}
 	}
 
@@ -364,7 +365,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	.info {
 		padding: var(--padding);
 		font-family: var(--sk-font-ui);
-		font-size: 1.2rem;
+		font-size: var(--sk-font-size-ui-medium);
+		color: var(--sk-text-4);
 		font-weight: normal;
 		text-transform: uppercase;
 		pointer-events: all;
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -83,7 +83,7 @@
 			color: var(--sk-text-4);
 			text-transform: uppercase;
 			padding: 0.5rem var(--padding);
-			font-size: var(--sk-text-xs);
+			font-size: var(--sk-font-size-ui-medium);
 			z-index: 2;
 			user-select: none;
 
@@ -168,7 +168,7 @@
 		strong {
 			width: 100%;
 			overflow: hidden;
-			font-size: var(--sk-font-size-ui);
+			font-size: var(--sk-font-size-ui-medium);
 			color: var(--sk-text-2);
 
 			span {
@@ -178,7 +178,7 @@
 					content: ' • ';
 					position: relative;
 					color: var(--sk-text-4);
-					font-size: var(--sk-text-xs);
+					font-size: var(--sk-font-size-ui-small);
 					top: -0.1rem;
 				}
 			}
@@ -213,7 +213,7 @@
 
 			span {
 				color: var(--sk-text-3);
-				font-size: var(--sk-text-xs);
+				font-size: var(--sk-font-size-ui-small);
 				margin: 0.4rem 0 0 0;
 			}
 
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
@@ -89,12 +89,11 @@ strong {
 
 code,
 kbd {
-	font-size: var(--sk-text-xs);
 	font-family: var(--sk-font-mono);
-	line-height: 1.7;
 }
 
 code {
+	font-size: var(--sk-font-size-code);
 	position: relative;
 	border-radius: 0.3em;
 	white-space: nowrap;
@@ -104,6 +103,7 @@ code {
 	margin: 0 0.2rem;
 	top: -0.1rem;
 	background: var(--sk-back-4);
+	line-height: 1.7;
 }
 
 pre {
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
`@@ -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-font-size-ui-tiny);`
	`57`	`+ font-size: var(--sk-font-size-ui-small);`
`58`	`58`	`font-weight: 400;`
`59`	`59`	`text-transform: uppercase;`
`60`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -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-font-size-ui-tiny);`
	`68`	`+ font-size: var(--sk-font-size-ui-small);`
`69`	`69`	`text-transform: uppercase;`
`70`	`70`	`}`
`71`	`71`
Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@`
`79`	`79`
`80`	`80`	`label {`
`81`	`81`	`font-family: var(--sk-font-ui);`
`82`		`- font-size: var(--sk-font-size-ui-tiny);`
	`82`	`+ font-size: var(--sk-font-size-ui-small);`
`83`	`83`	`display: block;`
`84`	`84`	`}`
`85`	`85`
Original file line number	Diff line number	Diff line change
`@@ -179,7 +179,7 @@`
`179`	`179`	`}`
`180`	`180`
`181`	`181`	`small {`
`182`		`- font-size: var(--sk-text-xs);`
	`182`	`+ font-size: var(--sk-font-size-ui-small);`
`183`	`183`	`color: var(--sk-text-3);`
`184`	`184`	`text-transform: uppercase;`
`185`	`185`	`}`
Original file line number	Diff line number	Diff line change
`@@ -193,11 +193,11 @@`
`193`	`193`	`header strong,`
`194`	`194`	`h1 {`
`195`	`195`	`font-family: inherit;`
`196`		`- font-size: var(--sk-font-size-ui-small);`
	`196`	`+ font-size: var(--sk-font-size-ui-medium);`
`197`	`197`	`}`
`198`	`198`
`199`	`199`	`.menu {`
`200`		`- font-size: var(--sk-font-size-ui-small);`
	`200`	`+ font-size: var(--sk-font-size-ui-medium);`
`201`	`201`	`border: none;`
`202`	`202`	`}`
`203`	`203`
`@@ -449,12 +449,12 @@`
`449`	`449`
`450`	`450`	`h1 :where(.part-title, .chapter-title) {`
`451`	`451`	`grid-row: 2 / span 1;`
`452`		`- font-size: var(--sk-text-xs);`
	`452`	`+ font-size: var(--sk-font-size-ui-small);`
`453`	`453`	`color: var(--sk-text-3);`
`454`	`454`	`}`
`455`	`455`
`456`	`456`	`h1 strong {`
`457`		`- font-size: var(--sk-font-size-ui-small) !important;`
	`457`	`+ font-size: var(--sk-font-size-ui-medium) !important;`
`458`	`458`	`line-height: 1;`
`459`	`459`	`}`
`460`	`460`	`}`