feat: Minor style fixes (#87)

* Add color scheme dark

* Add changeset

* Smaller logo on nav

* add a slot for homepage link content, use internal logo (#88)

* add a slot for homepage link content, use internal logo

* Make it reesponsive and dark mode compliant

* Add sk-text-4, line height for better alignment

* Make nav text smaller

* Update packages/site-kit/src/lib/components/Nav.svelte

---------

Co-authored-by: Rich Harris <git@rich-harris.dev>
Co-authored-by: Puru Vijay <devpuruvj@gmail.com>

* fix width

* Exit prerelease

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <git@rich-harris.dev>

.changeset/pre.json

@@ -1,5 +1,5 @@
 {
-  "mode": "pre",
+  "mode": "exit",
   "tag": "next",
   "initialVersions": {
     "@sveltejs/site-kit": "3.4.0"

.changeset/warm-maps-drop.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': patch
+---
+
+Minor fixes to style

packages/site-kit/src/lib/components/Nav.svelte

@@ -7,9 +7,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import Icon from './Icon.svelte';
 	import Separator from './Separator.svelte';
 
-	/** @type {string} */
-	export let logo;
-	export let home = 'Home';
 	export let home_title = 'Homepage';
 
 	let open = false;
@@ -62,8 +59,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 {/if}
 
 <nav class:visible={visible || open} class:open bind:this={nav} aria-label="Primary">
-	<a href="/" class="nav-spot home" title={home_title} style="background-image: url({logo})">
-		{home}
+	<a href="/" class="nav-spot home" title={home_title}>
+		<slot name="home" />
 	</a>
 
 	<button
@@ -86,7 +83,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		<Separator />
 
 		<div class="appearance">
-			<span class="caption">Color Scheme</span>
+			<span class="caption">Theme</span>
 			<ThemeToggle />
 		</div>
 	</ul>
@@ -154,15 +151,28 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	ul :global(a) {
 		color: var(--sk-text-2);
+		line-height: 1;
 	}
 
 	.home {
 		height: var(--sk-nav-height);
 		display: flex;
-		text-indent: -9999px;
+		background-image: url(../branding/svelte-logo.svg);
 		background-position: calc(var(--sk-page-padding-side) - 1rem) 50%;
 		background-repeat: no-repeat;
 		background-size: auto 70%;
+		align-items: center;
+		padding-left: calc(var(--sk-page-padding-side) + 4rem);
+		text-decoration: none;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		font-size: 1.8rem;
+		color: var(--sk-text-4);
+	}
+
+	.home :global(strong) {
+		color: var(--sk-text-1);
+		font-weight: inherit;
 	}
 
 	button {
@@ -177,7 +187,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: 100%;
 		align-items: center;
 		margin-left: 0.75rem;
-		transform: translateY(2px);
+		/* transform: translateY(2px); */
 	}
 
 	.appearance .caption {
@@ -187,7 +197,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		margin-right: 0.5rem;
 	}
 
-	@media (max-width: 800px) {
+	@media (max-width: 799px) {
 		ul {
 			position: relative;
 			display: none;
@@ -228,14 +238,18 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			justify-content: space-between;
 			align-items: center;
 			margin: 10px 0 0;
-			padding: 1rem 0.75rem;
+			padding: 1rem 1.25rem;
 			background: var(--sk-back-3);
-			border-radius: 0.5rem;
+			border-radius: 3.5rem;
 		}
 
 		.appearance .caption {
 			display: block;
 		}
+
+		.home :global(span :not(strong)) {
+			display: none;
+		}
 	}
 
 	@media (min-width: 800px) {

packages/site-kit/src/lib/styles/tokens.css

@@ -30,6 +30,8 @@
 
 @media only screen and (prefers-color-scheme: dark) {
 	:root {
+		color-scheme: dark;
+
 		--sk-back-3-hsl: 0, 0%, 14%;
 		--sk-back-1: hsl(0, 0%, 10%);
 		--sk-back-2: hsl(0, 0%, 18%);
@@ -43,6 +45,7 @@
 		--sk-text-1: hsl(0, 0%, 90%);
 		--sk-text-2: hsl(0, 0%, 80%);
 		--sk-text-3: hsl(0, 0%, 65%);
+		--sk-text-4: hsl(0, 0%, 45%);
 		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
 		--sk-scrollbar: rgba(255, 255, 255, 0.3);
 
@@ -68,6 +71,8 @@
 	}
 
 	body.light {
+		color-scheme: light;
+
 		--sk-back-3-hsl: 206, 64%, 98%;
 		--sk-back-1: hsl(0, 0%, 100%);
 		--sk-back-2: hsl(0, 0%, 100%); /* same as sk-back-1 in light mode, different in dark mode */
@@ -80,6 +85,7 @@
 		--sk-text-1: hsl(0, 0%, 13%);
 		--sk-text-2: hsl(0, 0%, 27%);
 		--sk-text-3: var(--sk-theme-2);
+		--sk-text-4: hsl(0, 0%, 65%);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 
 		/* same in light mode, different in dark mode */
@@ -125,6 +131,8 @@
 
 @media screen and (prefers-color-scheme: light) {
 	:root {
+		color-scheme: light;
+
 		--sk-back-3-hsl: 206, 64%, 98%;
 		--sk-back-1: hsl(0, 0%, 100%);
 		--sk-back-2: hsl(0, 0%, 100%); /* same as sk-back-1 in light mode, different in dark mode */
@@ -137,6 +145,7 @@
 		--sk-text-1: hsl(0, 0%, 13%);
 		--sk-text-2: hsl(0, 0%, 27%);
 		--sk-text-3: var(--sk-theme-2);
+		--sk-text-4: hsl(0, 0%, 65%);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 
 		/* same in light mode, different in dark mode */
@@ -165,6 +174,8 @@
 	}
 
 	body.dark {
+		color-scheme: dark;
+
 		--sk-back-3-hsl: 0, 0%, 14%;
 		--sk-back-1: hsl(0, 0%, 10%);
 		--sk-back-2: hsl(0, 0%, 18%);
@@ -178,6 +189,7 @@
 		--sk-text-1: hsl(0, 0%, 90%);
 		--sk-text-2: hsl(0, 0%, 80%);
 		--sk-text-3: hsl(0, 0%, 65%);
+		--sk-text-4: hsl(0, 0%, 45%);
 		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
 		--sk-scrollbar: rgba(255, 255, 255, 0.3);