more

Author: Rich-Harris

apps/svelte.dev/src/lib/components/ScreenToggle.svelte

@@ -30,7 +30,6 @@
 		height: 1em;
 		padding: 0.3em 0.4em;
 		border-radius: var(--sk-border-radius);
-		line-height: 1em;
 		box-sizing: content-box;
 		color: var(--sk-text-3);
 		border: 1px solid var(--sk-back-3);

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

@@ -152,8 +152,7 @@
 	}
 
 	h1 {
-		font-size: 4rem;
-		font-weight: 400;
+		font: var(--sk-font-h1);
 	}
 
 	.user {
@@ -162,16 +161,17 @@
 		position: relative;
 		margin: 1rem 0;
 		color: var(--sk-text-2);
-	}
-
-	.avatar {
-		position: absolute;
-		left: 0;
-		top: 0.1rem;
-		width: 2.4rem;
-		height: 2.4rem;
-		border: 1px solid rgba(0, 0, 0, 0.3);
-		border-radius: 0.2rem;
+		font: var(--sk-font-ui-medium);
+
+		.avatar {
+			position: absolute;
+			left: 0;
+			top: 0.1rem;
+			width: 2.4rem;
+			height: 2.4rem;
+			border: 1px solid rgba(0, 0, 0, 0.3);
+			border-radius: var(--sk-border-radius);
+		}
 	}
 
 	.controls {
@@ -182,7 +182,7 @@
 		width: 100%;
 		height: 4rem;
 		margin: 0 0 2rem 0;
-		font-size: 1.6rem;
+		font: var(--sk-font-ui-medium);
 		z-index: 2;
 		justify-content: space-between;
 		outline: 1rem solid var(--sk-back-1);
@@ -204,8 +204,6 @@
 
 	.controls input,
 	.controls button {
-		font-family: inherit;
-		font-size: inherit;
 	}
 
 	.controls input[type='search'] {
@@ -218,6 +216,7 @@
 		border: 1px solid var(--sk-back-5);
 		border-radius: var(--sk-border-radius);
 		z-index: 2;
+		font: var(--sk-font-ui-large);
 	}
 
 	.controls button {
@@ -247,7 +246,7 @@
 
 	h2 {
 		color: var(--sk-text-2);
-		font-weight: 400;
+		font: var(--sk-font-ui-medium);
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
@@ -263,7 +262,7 @@
 	}
 
 	li span {
-		font-size: 12px;
+		font: var(--sk-font-ui-small);
 		color: var(--sk-text-3);
 	}
 

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

@@ -345,7 +345,6 @@ export default app;`
 		left: 0;
 		width: 100%;
 		height: 100%;
-		font-family: var(--sk-font-family-ui);
 	}
 
 	button,

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

@@ -82,7 +82,7 @@
 
 		.description {
 			position: relative;
-			font-family: var(--sk-font-family-ui);
+			font: var(--sk-font-ui-medium);
 			display: flex;
 			align-items: center;
 			bottom: 0.2em;
@@ -93,10 +93,9 @@
 				line-height: 1;
 				margin: 0 1em;
 				text-transform: uppercase;
-				font: var(--sk-font-ui-small);
 				background: var(--sk-text-2);
 				border-radius: var(--sk-border-radius);
-				font-family: var(--sk-font-family-ui);
+				font: var(--sk-font-ui-small);
 				color: var(--sk-back-2);
 			}
 		}

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

@@ -176,13 +176,12 @@
 	}
 
 	video::cue {
-		font-size: 1.25rem;
-		line-height: 1.3;
+		font: var(--sk-font-ui-small);
 	}
 
 	@media (min-width: 600px) {
 		video::cue {
-			font-size: 1.75rem;
+			font: var(--sk-font-ui-medium);
 		}
 	}
 

apps/svelte.dev/src/routes/docs/[...path]/+page.svelte

@@ -68,9 +68,8 @@
 <style>
 	.edit {
 		position: relative;
-		font-size: 1.4rem;
 		margin: 6rem 0 2rem 0;
-		font-family: var(--sk-font-family-ui);
+		font: var(--sk-font-ui-small);
 
 		a {
 			text-decoration: none;

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

@@ -29,7 +29,6 @@
 		max-width: 64rem;
 		margin: 0 auto;
 		padding: 8rem 1rem;
-		font-family: var(--sk-font-family-ui);
 	}
 
 	form {

apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte

@@ -71,8 +71,7 @@
 		border: none;
 		background-color: var(--sk-back-3);
 		color: var(--sk-text-1);
-		font-family: inherit;
-		font-size: 1.6rem;
+		font: var(--sk-font-ui-medium);
 	}
 
 	a:focus-visible,

apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte

@@ -249,12 +249,11 @@
 		grid-template-columns: 4rem 1fr;
 		grid-gap: 1rem;
 		padding: 1rem 0;
-		font-size: 1.3rem;
-		line-height: 2rem;
+		font: var(--sk-font-mono);
 	}
 
 	.fake * {
-		font-family: var(--font-mono) !important;
+		/* font-family: var(--font-mono) !important; */
 		color: #ccc;
 	}
 

apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte

@@ -172,8 +172,6 @@
 
 	header {
 		position: relative;
-		/* z-index: 2; */
-		font-family: var(--sk-font-family-ui);
 
 		display: grid;
 		grid-template-columns: 4rem minmax(0, 1fr) 4rem;
@@ -270,9 +268,8 @@
 
 	.separator {
 		position: relative;
-		font-size: 0.8em;
+		font: var(--sk-font-ui-small);
 		opacity: 0.3;
-		top: -0.1rem;
 		display: inline-block;
 	}