tweak background colours

Author: Rich-Harris

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

@@ -16,7 +16,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
-		background-color: var(--sk-bg-2);
+		background-color: var(--sk-bg-1);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;

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

@@ -40,7 +40,7 @@
 	}
 
 	.toc-container {
-		background: var(--sk-bg-3);
+		background: var(--sk-bg-2);
 		display: none;
 	}
 

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

@@ -188,7 +188,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: var(--sk-nav-height);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		background-color: var(--sk-bg-2);
+		background-color: var(--sk-bg-1);
 		font-family: var(--sk-font-family-body);
 		user-select: none;
 		isolation: isolate;
@@ -203,6 +203,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			height: 4px;
 			background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
 		}
+
+		:root.dark & {
+			background-color: var(--sk-bg-3);
+		}
 	}
 
 	a {

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

@@ -17,9 +17,9 @@
 
 	/* Background colours */
 	--sk-bg-1: hsl(0, 0%, 100%);
-	--sk-bg-2: hsl(0, 0%, 100%);
-	--sk-bg-3: hsl(0, 0%, 99%);
-	--sk-bg-4: hsl(0, 0%, 95%);
+	--sk-bg-2: hsl(0, 0%, 99.3%);
+	--sk-bg-3: hsl(0, 0%, 98.2%);
+	--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
 	--sk-bg-accent: var(--sk-fg-accent);
 	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
 
@@ -56,14 +56,14 @@
 	--sk-fg-accent: hsl(12, 94%, 62%);
 
 	/* Background colours */
-	--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
-	--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
-	--sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%);
-	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
+	--sk-bg-1: hsl(var(--sk-bg-hue), 10%, 12%);
+	--sk-bg-2: hsl(var(--sk-bg-hue), 12%, 14%);
+	--sk-bg-3: hsl(var(--sk-bg-hue), 14%, 16%);
+	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 21%);
 	--sk-bg-accent: hsl(15, 100%, 35%);
 
 	/* Border colour */
-	--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
+	--sk-border: hsl(var(--sk-bg-hue), 15%, 22%);
 
 	/* Syntax highlighting */
 	--shiki-color-text: hsl(45, 7%, 75%);