Yantramanav + Cardo (#122)

* oswald+cardo

* overpass+cardo

* Yantramanav + Cardo

* various

* prettier

* add a TODO

* add web-safe fallbacks

* use fontsource for fira mono, remove old font files

* prettier

Author: Rich-Harris

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

@@ -288,7 +288,7 @@ export default app;`
 		padding: 0.2em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-heading);
 		font-size: 1.6rem;
 		color: var(--sk-text-1);
 		line-height: 1;
@@ -310,8 +310,8 @@ export default app;`
 		background: transparent;
 		border: none;
 		color: currentColor;
-		font-family: var(--sk-font);
-		font-size: 1.6rem;
+		font-family: var(--sk-font-heading);
+		font-size: var(--sk-text-m);
 		opacity: 0.7;
 		outline: none;
 		flex: 1;

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

@@ -63,7 +63,7 @@
 	.name {
 		line-height: 1;
 		display: none;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-heading);
 		font-size: 1.6rem;
 	}
 
@@ -99,7 +99,7 @@
 	.menu button,
 	.menu a {
 		background-color: transparent;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		font-size: 1.6rem;
 		opacity: 0.7;
 		padding: 0.4rem 0;

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

@@ -68,7 +68,7 @@
 		background-color: var(--sk-theme-2);
 		color: white;
 		padding: 12px 16px;
-		font: 600 16px/1.7 var(--sk-font);
+		font: 600 16px/1.7 var(--sk-font-body);
 		border-radius: 2px;
 	}
 </style>

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

@@ -74,7 +74,7 @@
 	strong {
 		font-size: var(--sk-text-l);
 		text-align: center;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-heading);
 		text-transform: lowercase;
 		font-weight: 400;
 		color: var(--sk-text-2);

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

@@ -82,7 +82,7 @@
 		font-weight: 200;
 		line-height: 1.2;
 		color: var(--sk-text-2);
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		margin-bottom: 2rem;
 		/* max-width: 12em; */
 		/* margin: 0 auto; */

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

@@ -64,6 +64,7 @@
 	.post:where(:first-child, :nth-child(2))::before {
 		content: 'Latest post • ' attr(data-pubdate);
 		color: var(--sk-theme-3);
+		font-family: var(--sk-font-heading);
 		font-size: var(--sk-text-xs);
 		font-weight: 400;
 		letter-spacing: 0.05em;

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

@@ -68,6 +68,7 @@
 		line-height: 1;
 		z-index: 2;
 		margin: 6rem 0 2rem 0;
+		font-family: var(--sk-font-heading);
 
 		a {
 			text-decoration: none;
@@ -102,9 +103,10 @@
 
 	.controls span {
 		display: block;
-		font-size: 1.2rem;
+		font-size: var(--sk-text-s);
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: 400;
+		font-family: var(--sk-font-heading);
 		color: var(--sk-text-3);
 	}
 

apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte

@@ -70,7 +70,7 @@
 		}
 
 		label {
-			text-transform: uppercase;
+			font-family: var(--sk-font-heading);
 			display: block;
 		}
 
@@ -138,10 +138,9 @@
 			}
 
 			& label {
-				font-size: var(--sk-text-s);
+				font-size: var(--sk-text-m);
 
-				letter-spacing: 0.1em;
-				font-weight: 600;
+				font-weight: 500;
 				display: block;
 
 				&::before {

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

@@ -67,6 +67,7 @@
 	input {
 		flex: 1;
 		padding: 0.5rem 1rem 0.4rem 1rem;
+		border: none;
 		background-color: var(--sk-back-3);
 		color: var(--sk-text-1);
 		font-family: inherit;

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

@@ -134,6 +134,7 @@
 		justify-content: center;
 		background: var(--sk-back-2);
 		user-select: none;
+		font-family: var(--sk-font-heading);
 	}
 
 	.progress-container {