From 02830b90aabedc9bd9958588b78142f99b042346 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 11:48:26 -0400
Subject: [PATCH 1/6] use text color to highlight current section

---
 .../src/routes/docs/[...path]/OnThisPage.svelte   | 13 +++----------
 .../site-kit/src/lib/docs/DocsContents.svelte     | 15 ++++++++++-----
 packages/site-kit/src/lib/styles/tokens.css       |  4 ++--
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 82099510aa..ca5cfac8bb 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -59,7 +59,7 @@
 
 			a {
 				display: block;
-				color: inherit;
+				color: var(--sk-text-3);
 				box-shadow: none; /* unfortunate hack to unset some other CSS */
 
 				/* Only show the title link if it's in the sidebar */
@@ -156,15 +156,8 @@
 					display: block;
 				}
 
-				a.active::before {
-					content: '';
-					position: absolute;
-					left: -2rem;
-					top: calc(50% - 0.6em);
-					height: 1em;
-					width: 1em;
-					background: url($lib/icons/arrow-left.svg);
-					background-size: contain;
+				a.active {
+					color: var(--sk-text-1);
 				}
 			}
 		}
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 2638b9619a..e8ad6481d5 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -21,7 +21,11 @@
 				<ul>
 					{#each section.children as { metadata, slug }}
 						<li>
-							<a class="page" class:active={`/${slug}` === $page.url.pathname} href="/{slug}">
+							<a
+								class="page"
+								aria-current={`/${slug}` === $page.url.pathname ? 'page' : undefined}
+								href="/{slug}"
+							>
 								{metadata.title}
 							</a>
 						</li>
@@ -77,6 +81,7 @@
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		font-weight: 600;
+		color: var(--sk-text-2);
 	}
 
 	.page {
@@ -86,8 +91,8 @@
 		padding-bottom: 0.6em;
 	}
 
-	.active {
-		font-weight: 700;
+	[aria-current='page'] {
+		/* font-weight: 700; */
 		color: var(--sk-text-1);
 	}
 
@@ -121,7 +126,7 @@
 			background-color: var(--sk-back-4);
 		}
 
-		.active {
+		[aria-current='page'] {
 			background-color: hsla(var(--sk-theme-1-hsl), 0.1) !important;
 			color: var(--sk-theme-1) !important;
 			font-weight: 400;
@@ -144,7 +149,7 @@
 			overflow-y: auto;
 		}
 
-		.active::after {
+		[aria-current='page']::after {
 			--size: 1.8rem;
 			content: '';
 			position: absolute;
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 617431fe42..b853fd09a1 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -105,7 +105,7 @@ body {
 		--sk-theme-3-hsl: 204, 100%, 63%;
 		--sk-text-1: hsl(0, 0%, 13%);
 		--sk-text-2: hsl(0, 0%, 27%);
-		--sk-text-3: var(--sk-theme-2);
+		--sk-text-3: hsl(0, 0%, 50%);
 		--sk-text-4: hsl(0, 0%, 65%);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
@@ -167,7 +167,7 @@ body {
 		--sk-theme-3-hsl: 204, 100%, 63%;
 		--sk-text-1: hsl(0, 0%, 13%);
 		--sk-text-2: hsl(0, 0%, 27%);
-		--sk-text-3: var(--sk-theme-2);
+		--sk-text-3: hsl(0, 0%, 50%);
 		--sk-text-4: hsl(0, 0%, 65%);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);

From d3055860977c7620b59ee2c9b0281ecbdba98bf0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 11:52:56 -0400
Subject: [PATCH 2/6] tweak

---
 packages/site-kit/src/lib/styles/tokens.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index b853fd09a1..644075368d 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -103,10 +103,10 @@ body {
 		--sk-theme-1-hsl: 12, 93%, 43%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
 		--sk-theme-3-hsl: 204, 100%, 63%;
-		--sk-text-1: hsl(0, 0%, 13%);
-		--sk-text-2: hsl(0, 0%, 27%);
-		--sk-text-3: hsl(0, 0%, 50%);
-		--sk-text-4: hsl(0, 0%, 65%);
+		--sk-text-1: hsla(0, 0%, 0%, 0.87);
+		--sk-text-2: hsla(0, 0%, 0%, 0.73);
+		--sk-text-3: hsla(0, 0%, 0%, 0.50);
+		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
 
@@ -165,10 +165,10 @@ body {
 		--sk-theme-1-hsl: 12, 93%, 43%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
 		--sk-theme-3-hsl: 204, 100%, 63%;
-		--sk-text-1: hsl(0, 0%, 13%);
-		--sk-text-2: hsl(0, 0%, 27%);
-		--sk-text-3: hsl(0, 0%, 50%);
-		--sk-text-4: hsl(0, 0%, 65%);
+		--sk-text-1: hsla(0, 0%, 0%, 0.87);
+		--sk-text-2: hsla(0, 0%, 0%, 0.73);
+		--sk-text-3: hsla(0, 0%, 0%, 0.50);
+		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
 

From 90a5582aaaffe60466fcccb117edad9e38a56689 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 11:55:16 -0400
Subject: [PATCH 3/6] improve contrast

---
 packages/site-kit/src/lib/styles/tokens.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 644075368d..52fa2c7738 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -105,7 +105,7 @@ body {
 		--sk-theme-3-hsl: 204, 100%, 63%;
 		--sk-text-1: hsla(0, 0%, 0%, 0.87);
 		--sk-text-2: hsla(0, 0%, 0%, 0.73);
-		--sk-text-3: hsla(0, 0%, 0%, 0.50);
+		--sk-text-3: hsla(0, 0%, 0%, 0.60);
 		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
@@ -167,7 +167,7 @@ body {
 		--sk-theme-3-hsl: 204, 100%, 63%;
 		--sk-text-1: hsla(0, 0%, 0%, 0.87);
 		--sk-text-2: hsla(0, 0%, 0%, 0.73);
-		--sk-text-3: hsla(0, 0%, 0%, 0.50);
+		--sk-text-3: hsla(0, 0%, 0%, 0.60);
 		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);

From f3a246f264bd6fae11b21c52f3302d8dd0bf5515 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 11:59:48 -0400
Subject: [PATCH 4/6] prettier

---
 packages/site-kit/src/lib/styles/tokens.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 52fa2c7738..81e37555f8 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -105,7 +105,7 @@ body {
 		--sk-theme-3-hsl: 204, 100%, 63%;
 		--sk-text-1: hsla(0, 0%, 0%, 0.87);
 		--sk-text-2: hsla(0, 0%, 0%, 0.73);
-		--sk-text-3: hsla(0, 0%, 0%, 0.60);
+		--sk-text-3: hsla(0, 0%, 0%, 0.6);
 		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
@@ -167,7 +167,7 @@ body {
 		--sk-theme-3-hsl: 204, 100%, 63%;
 		--sk-text-1: hsla(0, 0%, 0%, 0.87);
 		--sk-text-2: hsla(0, 0%, 0%, 0.73);
-		--sk-text-3: hsla(0, 0%, 0%, 0.60);
+		--sk-text-3: hsla(0, 0%, 0%, 0.6);
 		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);

From a55e061fd4e56bce8aae756820f549bc7fbc02cd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 12:49:47 -0400
Subject: [PATCH 5/6] contrast

---
 packages/site-kit/src/lib/styles/tokens.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 81e37555f8..009d932ae0 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -103,9 +103,9 @@ body {
 		--sk-theme-1-hsl: 12, 93%, 43%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
 		--sk-theme-3-hsl: 204, 100%, 63%;
-		--sk-text-1: hsla(0, 0%, 0%, 0.87);
+		--sk-text-1: hsla(0, 0%, 0%, 0.95);
 		--sk-text-2: hsla(0, 0%, 0%, 0.73);
-		--sk-text-3: hsla(0, 0%, 0%, 0.6);
+		--sk-text-3: hsla(0, 0%, 0%, 0.55);
 		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
@@ -165,9 +165,9 @@ body {
 		--sk-theme-1-hsl: 12, 93%, 43%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
 		--sk-theme-3-hsl: 204, 100%, 63%;
-		--sk-text-1: hsla(0, 0%, 0%, 0.87);
+		--sk-text-1: hsla(0, 0%, 0%, 0.95);
 		--sk-text-2: hsla(0, 0%, 0%, 0.73);
-		--sk-text-3: hsla(0, 0%, 0%, 0.6);
+		--sk-text-3: hsla(0, 0%, 0%, 0.55);
 		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);

From ce02a50e5461c6a72fedfe112d7344c1476348a0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 25 Sep 2024 13:03:53 -0400
Subject: [PATCH 6/6] add subtle depth cue to make current page more visible

---
 .../src/routes/docs/[...path]/+layout.svelte           | 10 ++++++++++
 packages/site-kit/src/lib/docs/DocsContents.svelte     |  1 +
 2 files changed, 11 insertions(+)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index 7d97a529c4..dca52d6b22 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -53,6 +53,16 @@
 			left: 0;
 			top: var(--sk-nav-height);
 			overflow: hidden;
+
+			&::after {
+				content: '';
+				position: absolute;
+				right: 0;
+				top: 0;
+				width: 3px;
+				height: 100%;
+				background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.03));
+			}
 		}
 
 		.page {
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index e8ad6481d5..0728fb7707 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -163,6 +163,7 @@
 			rotate: 45deg;
 			/** needed to synchronise with transition on `*` in `base.css` */
 			transition: background-color 0.5s var(--quint-out);
+			box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
 		}
 	}
 </style>