From badf5bf2540d4caa1b5609b57de45332ad01b540 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Oct 2024 09:17:37 -0400
Subject: [PATCH 01/11] neumorphic buttons

---
 .../playground/[id]/AppControls.svelte        | 12 ++---
 .../src/lib/components/ThemeToggle.svelte     | 52 +++++++++++++++----
 packages/site-kit/src/lib/styles/base.css     | 30 +++++++++++
 3 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 30d2647f90..85311c400a 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -215,7 +215,7 @@ export default app;`
 	/>
 
 	<div class="buttons">
-		<button class="icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
+		<button class="raised icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
 			{#if zen_mode}
 				<Icon name="close" />
 			{:else}
@@ -223,11 +223,11 @@ export default app;`
 			{/if}
 		</button>
 
-		<button class="icon" disabled={downloading} onclick={download} title="download zip file">
+		<button class="raised icon" disabled={downloading} onclick={download} title="download zip file">
 			<Icon name="download" />
 		</button>
 
-		<button class="icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
+		<button class="raised icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
 			{#if justForked}
 				<Icon name="check" />
 			{:else}
@@ -235,7 +235,7 @@ export default app;`
 			{/if}
 		</button>
 
-		<button class="icon" disabled={saving || !user} onclick={save} title="save">
+		<button class="raised icon" disabled={saving || !user} onclick={save} title="save">
 			{#if justSaved}
 				<Icon name="check" />
 			{:else}
@@ -249,7 +249,7 @@ export default app;`
 		{#if user}
 			<UserMenu {user} />
 		{:else}
-			<button class="icon" onclick={(e) => (e.preventDefault(), login())}>
+			<button class="raised icon" onclick={(e) => (e.preventDefault(), login())}>
 				<Icon name="log-in" />
 				<span>&nbsp;Log in to save</span>
 			</button>
@@ -285,7 +285,7 @@ export default app;`
 	.icon {
 		transform: translateY(0.1rem);
 		display: inline-block;
-		padding: 0.2em;
+		padding: 0.4em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
 		font-family: var(--sk-font-ui);
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 778f548bc6..54d36025ba 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -38,24 +38,56 @@
 	onDestroy(() => query?.removeEventListener('change', cb));
 </script>
 
-<button
-	onclick={toggle}
-	type="button"
-	aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
-	aria-label={label}
-></button>
+<div class="appearance">
+	<span class="caption">Theme</span>
+	<button
+		onclick={toggle}
+		class="raised"
+		type="button"
+		aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
+		aria-label={label}
+	></button>
+</div>
 
 <style>
 	button {
-		width: 2.3rem;
-		height: 2.3rem;
+		width: 4rem;
+		height: 4rem;
 		background: red;
-		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / contain;
+		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
 		opacity: 0.6;
 
 		:global(.dark) & {
-			background: url($lib/icons/theme-dark.svg);
+			background-image: url($lib/icons/theme-dark.svg);
 			opacity: 0.8;
 		}
 	}
+
+	.appearance {
+		display: flex;
+		align-items: center;
+		margin-left: 1.5rem;
+
+		.caption {
+			display: none;
+			font-size: var(--sk-text-xs);
+			line-height: 1;
+			margin-right: 0rem;
+		}
+	}
+
+	@media (max-width: 799px) {
+		.appearance {
+			position: relative;
+			display: flex;
+			padding: 1.5rem 0;
+			justify-content: space-between;
+		}
+
+		.appearance .caption {
+			display: block;
+
+			font-size: var(--sk-text-s);
+		}
+	}
 </style>
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 9800e8674f..497edd63f0 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -171,6 +171,36 @@ button > svg {
 	stroke: currentColor !important;
 }
 
+.raised {
+	--highlight: hsl(0 0 100 / 0.8);
+	--highlight-active: hsl(0 0 100 / 1);
+	--shadow: hsl(0 0 0 / 0.1);
+	--shadow-active: hsl(0 0 0 / 0.15);
+
+	.dark & {
+		--highlight: hsl(0 0 100 / 0.15);
+		--highlight-active: hsl(0 0 100 / 0.15);
+		--shadow: hsl(0 0 0 / 0.2);
+		--shadow-active: hsl(0 0 0 / 0.3);
+	}
+
+
+	border-radius: var(--sk-border-radius);
+	box-shadow: 2px 2px 4px var(--shadow), -1px -1px 3px var(--highlight);
+
+	&:hover {
+		box-shadow: 2px 2px 5px var(--shadow-active), -1px -1px 4px var(--highlight-active);
+	}
+
+	&:active {
+		box-shadow: inset -1px -1px 3px var(--highlight-active), inset 1px 1px 3px var(--shadow-active);
+	}
+
+	&:disabled {
+		box-shadow: none;
+	}
+}
+
 /*  links ------------------------------------- */
 a {
 	color: var(--sk-theme-1);

From 7489c7ca5c5b5473cda1bff7a36bcd89ff291676 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Oct 2024 00:19:48 -0400
Subject: [PATCH 02/11] prettier

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

diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index a349fc92f1..40b9069591 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -180,16 +180,21 @@ button > svg {
 		--shadow-active: hsl(0 0 0 / 0.3);
 	}
 
-
 	border-radius: var(--sk-border-radius);
-	box-shadow: 2px 2px 4px var(--shadow), -1px -1px 3px var(--highlight);
+	box-shadow:
+		2px 2px 4px var(--shadow),
+		-1px -1px 3px var(--highlight);
 
 	&:hover {
-		box-shadow: 2px 2px 5px var(--shadow-active), -1px -1px 4px var(--highlight-active);
+		box-shadow:
+			2px 2px 5px var(--shadow-active),
+			-1px -1px 4px var(--highlight-active);
 	}
 
 	&:active {
-		box-shadow: inset -1px -1px 3px var(--highlight-active), inset 1px 1px 3px var(--shadow-active);
+		box-shadow:
+			inset -1px -1px 3px var(--highlight-active),
+			inset 1px 1px 3px var(--shadow-active);
 	}
 
 	&:disabled {

From 56fd791f28a2c3bcc9a6d929c08a77e793ad96e9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Oct 2024 08:41:18 -0400
Subject: [PATCH 03/11] round

---
 packages/site-kit/src/lib/components/ThemeToggle.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 54d36025ba..7c7205f468 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -51,8 +51,9 @@
 
 <style>
 	button {
-		width: 4rem;
-		height: 4rem;
+		width: 3.2rem;
+		aspect-ratio: 1;
+		border-radius: 50%;
 		background: red;
 		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
 		opacity: 0.6;
@@ -66,7 +67,6 @@
 	.appearance {
 		display: flex;
 		align-items: center;
-		margin-left: 1.5rem;
 
 		.caption {
 			display: none;

From 57b786987e2c0baf4d32ea088bc88426e561d33d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 4 Oct 2024 09:18:10 -0400
Subject: [PATCH 04/11] tweaks

---
 packages/site-kit/src/lib/components/Text.svelte | 16 +++++++++-------
 packages/site-kit/src/lib/markdown/renderer.ts   |  4 ++--
 packages/site-kit/src/lib/styles/base.css        | 16 ++++++++--------
 packages/site-kit/src/lib/styles/tokens.css      |  6 +++---
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index bf40218f63..045285ec1d 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -77,10 +77,12 @@
 
 		.code-block {
 			position: relative;
-			box-shadow: 1px 2px 1rem hsla(0 0 0 / 0.08);
+			background: var(--sk-back-2);
+			border: 1px solid var(--sk-back-5);
 			border-radius: var(--sk-border-radius);
 			overflow: hidden;
 			margin: 2rem 0;
+			/* background: var(--sk-back-3); */
 
 			.controls {
 				--height: 3.6rem;
@@ -89,7 +91,8 @@
 				position: absolute;
 				top: 0;
 				height: var(--height);
-				padding: 0.3rem;
+				padding: 0.3rem 0.5rem 0.3rem 1rem;
+				gap: 0.5rem;
 				width: 100%;
 				z-index: 2;
 				justify-content: end;
@@ -97,7 +100,7 @@
 
 				&:has(.filename) {
 					position: relative;
-					background: var(--sk-back-4);
+					border-bottom: 1px solid var(--sk-back-4);
 				}
 
 				.filename {
@@ -106,7 +109,6 @@
 					flex: 1;
 					font-family: var(--sk-font-mono);
 					font-size: var(--sk-font-size-code);
-					padding: 0 1rem;
 					color: var(--sk-text-2);
 
 					&::after {
@@ -124,9 +126,9 @@
 					appearance: none;
 					display: flex;
 					align-items: center;
-					height: calc(var(--height) - 0.6rem);
+					height: calc(var(--height) - 1rem);
 					outline-offset: 0;
-					padding: 0 0.4rem;
+					padding: 0 0.6rem;
 
 					&::before,
 					&::after {
@@ -162,7 +164,7 @@
 
 				.copy-to-clipboard {
 					position: relative;
-					height: calc(var(--height) - 0.6rem);
+					height: calc(var(--height) - 1rem);
 					aspect-ratio: 1;
 					border-radius: var(--sk-border-radius);
 
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index ba71f4aca9..a1512b7ecb 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -171,11 +171,11 @@ export async function render_content_markdown(
 			}
 
 			if (converted) {
-				html += `<input class="ts-toggle" checked title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
+				html += `<input class="ts-toggle raised" checked title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
 			}
 
 			if (options.copy) {
-				html += `<button class="copy-to-clipboard" title="Copy to clipboard" aria-label="Copy to clipboard"></button>`;
+				html += `<button class="copy-to-clipboard raised" title="Copy to clipboard" aria-label="Copy to clipboard"></button>`;
 			}
 
 			html += '</div>';
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 40b9069591..d08106a1b4 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -174,27 +174,27 @@ button > svg {
 	--shadow-active: hsl(0 0 0 / 0.15);
 
 	.dark & {
-		--highlight: hsl(0 0 100 / 0.15);
+		--highlight: hsl(0 0 100 / 0.1);
 		--highlight-active: hsl(0 0 100 / 0.15);
-		--shadow: hsl(0 0 0 / 0.2);
-		--shadow-active: hsl(0 0 0 / 0.3);
+		--shadow: hsl(0 0 0 / 0.3);
+		--shadow-active: hsl(0 0 0 / 0.22);
 	}
 
 	border-radius: var(--sk-border-radius);
 	box-shadow:
-		2px 2px 4px var(--shadow),
+		1px 1px 3px var(--shadow),
 		-1px -1px 3px var(--highlight);
 
 	&:hover {
 		box-shadow:
-			2px 2px 5px var(--shadow-active),
-			-1px -1px 4px var(--highlight-active);
+			1px 1px 3px var(--shadow-active),
+			-1px -1px 3px var(--highlight-active);
 	}
 
 	&:active {
 		box-shadow:
-			inset -1px -1px 3px var(--highlight-active),
-			inset 1px 1px 3px var(--shadow-active);
+			inset -1px -1px 2px var(--highlight-active),
+			inset 1px 1px 2px var(--shadow-active);
 	}
 
 	&:disabled {
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 416af9baf2..6ba3d9213c 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -50,7 +50,7 @@
 	--sk-back-2: hsla(0, 0%, 100%, 1);
 	--sk-back-3: hsla(0, 0%, 99%, 1);
 	--sk-back-4: hsl(0, 0%, 95%);
-	--sk-back-5: hsl(0, 0%, 80%);
+	--sk-back-5: hsl(0, 0%, 92%);
 
 	--sk-text-1: hsla(0, 0%, 0%, 0.95);
 	--sk-text-2: hsla(0, 0%, 0%, 0.88);
@@ -91,10 +91,10 @@
 		color-scheme: dark;
 
 		--sk-back-1: hsl(0 0 1);
-		--sk-back-2: hsl(0 0 18);
+		--sk-back-2: hsl(0 0 15);
 		--sk-back-3: hsl(0 0 12);
 		--sk-back-4: hsl(0 0 22);
-		--sk-back-5: hsl(0 0 40);
+		--sk-back-5: hsl(0 0 25);
 		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
 		--sk-theme-1-hsl: 12, 94%, 62%;
 		--sk-theme-2-hsl: 240, 8%, 44%;

From b6d7828546a1f39208f8c382861d32d54a49257f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Oct 2024 09:49:00 -0400
Subject: [PATCH 05/11] tweak filename styles

---
 packages/site-kit/src/lib/components/Text.svelte | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 467f24c3c3..9de17f3ceb 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -113,16 +113,20 @@
 
 				&:has(.filename) {
 					position: relative;
-					border-bottom: 1px solid var(--sk-back-4);
 				}
 
 				.filename {
 					content: attr(data-file);
 					display: block;
+					position: relative;
+					top: 0.1rem;
 					flex: 1;
-					font-family: var(--sk-font-mono);
-					font-size: var(--sk-font-size-code);
-					color: var(--sk-text-2);
+					font-family: var(--sk-font-ui);
+					font-size: var(--sk-font-size-ui-small);
+					color: var(--sk-text-4);
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
 
 					&::after {
 						content: attr(data-ext);

From 1f2daabd2fb5746044db33ad96c07bfefd93e984 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Oct 2024 12:23:09 -0400
Subject: [PATCH 06/11] apply to on-this-page dropdown

---
 .../routes/docs/[...path]/OnThisPage.svelte   | 27 ++++++++++++++-----
 .../src/lib/components/ThemeToggle.svelte     |  1 -
 packages/site-kit/src/lib/styles/base.css     | 24 +++--------------
 packages/site-kit/src/lib/styles/tokens.css   | 20 ++++++++++++++
 4 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 51e27b8c5b..57669fb1a0 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -107,22 +107,35 @@
 					color: var(--sk-text-3);
 				}
 
-				&::before {
+				&::before,
+				&::after {
 					content: '';
 					position: absolute;
 					right: 0;
-					top: calc(50% - 0.5em);
-					width: 2rem;
-					height: 2rem;
-					background: url($lib/icons/chevron.svg);
-					background-size: contain;
+					top: 0.3rem;
+					width: 2.4rem;
+					height: 2.4rem;
+				}
+
+				&::before {
+					box-shadow: var(--sk-raised);
+				}
+
+				&:hover::before {
+					box-shadow: var(--sk-raised-hover);
+				}
+
+				&::after {
+					background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
+					background-size: 2rem;
 					rotate: -90deg;
 					transition: rotate 0.2s;
+					transition: rotate 0.2s;
 				}
 			}
 
 			label:has(:checked) {
-				&::before {
+				&::after {
 					rotate: 90deg;
 				}
 
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 7c7205f468..d32f90d51b 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -53,7 +53,6 @@
 	button {
 		width: 3.2rem;
 		aspect-ratio: 1;
-		border-radius: 50%;
 		background: red;
 		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
 		opacity: 0.6;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 4b4c165a72..b138181b2b 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -168,33 +168,15 @@ button > svg {
 }
 
 .raised {
-	--highlight: hsl(0 0 100 / 0.8);
-	--highlight-active: hsl(0 0 100 / 1);
-	--shadow: hsl(0 0 0 / 0.1);
-	--shadow-active: hsl(0 0 0 / 0.15);
-
-	.dark & {
-		--highlight: hsl(0 0 100 / 0.1);
-		--highlight-active: hsl(0 0 100 / 0.15);
-		--shadow: hsl(0 0 0 / 0.3);
-		--shadow-active: hsl(0 0 0 / 0.22);
-	}
-
 	border-radius: var(--sk-border-radius);
-	box-shadow:
-		1px 1px 3px var(--shadow),
-		-1px -1px 3px var(--highlight);
+	box-shadow: var(--sk-raised);
 
 	&:hover {
-		box-shadow:
-			1px 1px 3px var(--shadow-active),
-			-1px -1px 3px var(--highlight-active);
+		box-shadow: var(--sk-raised-hover);
 	}
 
 	&:active {
-		box-shadow:
-			inset -1px -1px 2px var(--highlight-active),
-			inset 1px 1px 2px var(--shadow-active);
+		box-shadow: var(--sk-raised-active);
 	}
 
 	&:disabled {
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index c1329d26f6..d58e522375 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -85,6 +85,20 @@
 	/* overrides */
 	--shiki-color-background: var(--sk-back-2);
 
+	/* raised buttons */
+	--sk-raised-highlight: hsl(0 0 100 / 0.8);
+	--sk-raised-highlight-active: hsl(0 0 100 / 1);
+	--sk-raised-shadow: hsl(0 0 0 / 0.1);
+	--sk-raised-shadow-active: hsl(0 0 0 / 0.15);
+
+	--sk-raised: 1px 1px 3px var(--sk-raised-shadow),
+	-1px -1px 3px var(--sk-raised-highlight);
+	--sk-raised-hover: 1px 1px 3px var(--sk-raised-shadow-active),
+	-1px -1px 3px var(--sk-raised-highlight-active);
+	--sk-raised-active: box-shadow:
+	inset -1px -1px 2px var(--sk-raised-highlight-active),
+	inset 1px 1px 2px var(--sk-raised-shadow-active);
+
 	&.dark {
 		color-scheme: dark;
 
@@ -125,6 +139,12 @@
 
 		/* overrides */
 		--shiki-color-background: var(--sk-back-3);
+
+		/* raised buttons */
+		--sk-raised-highlight: hsl(0 0 100 / 0.1);
+		--sk-raised-highlight-active: hsl(0 0 100 / 0.15);
+		--sk-raised-shadow: hsl(0 0 0 / 0.3);
+		--sk-raised-shadow-active: hsl(0 0 0 / 0.22);
 	}
 }
 

From e730a8487644dd4847ee553f5c296b5602864a5d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Oct 2024 12:35:42 -0400
Subject: [PATCH 07/11] add to legacy details

---
 .../site-kit/src/lib/components/Text.svelte   | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 9de17f3ceb..fa6209339e 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -426,18 +426,31 @@
 		}
 
 		details.legacy {
+			&::before,
 			&::after {
 				content: '';
-				background: url(../icons/chevron.svg);
-				background-size: contain;
 				position: absolute;
-				right: 0.5rem;
-				top: 0.5rem;
-				width: 2rem;
-				height: 2rem;
+				right: 0.6rem;
+				top: 0.2rem;
+				width: 2.4rem;
+				height: 2.4rem;
+				pointer-events: none;
+			}
+
+			&::before {
+				box-shadow: var(--sk-raised);
+			}
+
+			&:hover::before {
+				box-shadow: var(--sk-raised-hover);
+			}
+
+			&::after {
+				background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
+				background-size: 2rem;
 				rotate: -90deg;
 				transition: rotate 0.2s;
-				pointer-events: none;
+				transition: rotate 0.2s;
 			}
 
 			& > summary {
@@ -459,7 +472,7 @@
 					position: absolute;
 					display: flex;
 					align-items: center;
-					right: 3rem;
+					right: 4rem;
 					top: 0;
 					height: 100%;
 					content: 'show all';

From 70daa7694107183d163bd6128326583da6ebce8d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Oct 2024 12:38:17 -0400
Subject: [PATCH 08/11] active styles

---
 apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 4 ++++
 packages/site-kit/src/lib/components/Text.svelte            | 4 ++++
 packages/site-kit/src/lib/styles/tokens.css                 | 2 +-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 8067859a76..d80fd95a60 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -119,6 +119,10 @@
 					box-shadow: var(--sk-raised-hover);
 				}
 
+				&:active::before {
+					box-shadow: var(--sk-raised-active);
+				}
+
 				&::after {
 					background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
 					background-size: 2rem;
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index fa6209339e..ce83034ced 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -445,6 +445,10 @@
 				box-shadow: var(--sk-raised-hover);
 			}
 
+			&:has(summary:active)::before {
+				box-shadow: var(--sk-raised-active);
+			}
+
 			&::after {
 				background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
 				background-size: 2rem;
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index d58e522375..b26d69eae3 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -95,7 +95,7 @@
 	-1px -1px 3px var(--sk-raised-highlight);
 	--sk-raised-hover: 1px 1px 3px var(--sk-raised-shadow-active),
 	-1px -1px 3px var(--sk-raised-highlight-active);
-	--sk-raised-active: box-shadow:
+	--sk-raised-active:
 	inset -1px -1px 2px var(--sk-raised-highlight-active),
 	inset 1px 1px 2px var(--sk-raised-shadow-active);
 

From d079159c3e63c6cd4c73116b683fe75b4c4e13f5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Oct 2024 12:39:27 -0400
Subject: [PATCH 09/11] fix alignment

---
 .../src/routes/(authed)/playground/[id]/AppControls.svelte       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index f77bac23fa..13dc9ee920 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -293,7 +293,6 @@ export default app;`
 
 	.buttons {
 		text-align: right;
-		margin-right: 0.4rem;
 		display: flex;
 		align-items: center;
 		gap: 0.2em;

From 311b40ab54a4720f387321ba7ec3c8d6b8d2a89a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Oct 2024 12:42:38 -0400
Subject: [PATCH 10/11] prettier

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

diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index b26d69eae3..6833250023 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -91,13 +91,11 @@
 	--sk-raised-shadow: hsl(0 0 0 / 0.1);
 	--sk-raised-shadow-active: hsl(0 0 0 / 0.15);
 
-	--sk-raised: 1px 1px 3px var(--sk-raised-shadow),
-	-1px -1px 3px var(--sk-raised-highlight);
+	--sk-raised: 1px 1px 3px var(--sk-raised-shadow), -1px -1px 3px var(--sk-raised-highlight);
 	--sk-raised-hover: 1px 1px 3px var(--sk-raised-shadow-active),
-	-1px -1px 3px var(--sk-raised-highlight-active);
-	--sk-raised-active:
-	inset -1px -1px 2px var(--sk-raised-highlight-active),
-	inset 1px 1px 2px var(--sk-raised-shadow-active);
+		-1px -1px 3px var(--sk-raised-highlight-active);
+	--sk-raised-active: inset -1px -1px 2px var(--sk-raised-highlight-active),
+		inset 1px 1px 2px var(--sk-raised-shadow-active);
 
 	&.dark {
 		color-scheme: dark;

From 7921c9e0c0c2eb31233f2d565c7b09c6f9932f34 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 7 Oct 2024 13:54:17 -0400
Subject: [PATCH 11/11] use borders instead of box-shadow (#270)

---
 .../(authed)/playground/[id]/+page.svelte     |  2 +-
 .../routes/docs/[...path]/OnThisPage.svelte   | 17 ++++++++++---
 .../site-kit/src/lib/components/Text.svelte   | 19 +++++++++++----
 .../site-kit/src/lib/markdown/renderer.ts     |  2 +-
 packages/site-kit/src/lib/styles/base.css     | 15 ++++++------
 packages/site-kit/src/lib/styles/tokens.css   | 24 ++++++++-----------
 6 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 0089a201cd..eb250a9963 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -117,7 +117,7 @@
 		flex-direction: column;
 
 		@media (min-width: 800px) {
-			--app-controls-h: 4rem;
+			--app-controls-h: 4.4rem;
 		}
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index d80fd95a60..a9f81ed7a5 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -112,25 +112,36 @@
 				}
 
 				&::before {
-					box-shadow: var(--sk-raised);
+					border-radius: var(--sk-border-radius);
+					border-style: solid;
+					border-color: var(--sk-raised-color);
+					border-width: var(--sk-raised-width);
 				}
 
 				&:hover::before {
-					box-shadow: var(--sk-raised-hover);
+					border-color: var(--sk-raised-hover-color);
 				}
 
 				&:active::before {
-					box-shadow: var(--sk-raised-active);
+					border-color: var(--sk-raised-active-color);
+					border-width: var(--sk-raised-active-width);
 				}
 
 				&::after {
 					background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
 					background-size: 2rem;
+					top: 0.4rem;
+					right: 0.2rem;
 					rotate: -90deg;
 					transition: rotate 0.2s;
 					transition: rotate 0.2s;
 				}
 
+				&:active::after {
+					top: 0.5rem;
+					right: 0.1rem;
+				}
+
 				h3 {
 					font-family: var(--sk-font-ui);
 					font-size: var(--sk-font-size-ui-small);
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index ce83034ced..2076c83573 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -431,22 +431,26 @@
 				content: '';
 				position: absolute;
 				right: 0.6rem;
-				top: 0.2rem;
+				top: 0.1rem;
 				width: 2.4rem;
 				height: 2.4rem;
 				pointer-events: none;
 			}
 
 			&::before {
-				box-shadow: var(--sk-raised);
+				border-radius: var(--sk-border-radius);
+				border-style: solid;
+				border-color: var(--sk-raised-color);
+				border-width: var(--sk-raised-width);
 			}
 
 			&:hover::before {
-				box-shadow: var(--sk-raised-hover);
+				border-color: var(--sk-raised-hover-color);
 			}
 
 			&:has(summary:active)::before {
-				box-shadow: var(--sk-raised-active);
+				border-color: var(--sk-raised-active-color);
+				border-width: var(--sk-raised-active-width);
 			}
 
 			&::after {
@@ -455,6 +459,13 @@
 				rotate: -90deg;
 				transition: rotate 0.2s;
 				transition: rotate 0.2s;
+				top: 0.2rem;
+				right: 0.8rem;
+			}
+
+			&:has(summary:active)::after {
+				top: 0.3rem;
+				right: 0.7rem;
 			}
 
 			& > summary {
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index a1512b7ecb..8b993c8005 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -298,7 +298,7 @@ async function parse({
 		blockquote(token) {
 			let content = this.parser?.parse(token.tokens) ?? '';
 			if (content.includes('[!LEGACY]')) {
-				content = `<details class="legacy"><summary>Legacy mode</summary>${content.replace('[!LEGACY]', '')}</details>`;
+				content = `<details class="legacy"><summary><label>Legacy mode <button class="raised"></button></label></summary>${content.replace('[!LEGACY]', '')}</details>`;
 			}
 			return `<blockquote>${content}</blockquote>`;
 		}
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index a34a80f022..16f1380ad1 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -34,9 +34,6 @@ body {
 	scrollbar-width: thin;
 	scrollbar-color: var(--sk-scrollbar) transparent;
 	-webkit-tap-highlight-color: hsla(var(--sk-theme-1-hsl), 0.1);
-
-	transition: 0.5s var(--quint-out);
-	transition-property: background, background-color, background-image, border;
 }
 
 *:focus-visible {
@@ -169,18 +166,22 @@ button > svg {
 
 .raised {
 	border-radius: var(--sk-border-radius);
-	box-shadow: var(--sk-raised);
+	border-style: solid;
+	border-color: var(--sk-raised-color);
+	border-width: var(--sk-raised-width);
 
 	&:hover {
-		box-shadow: var(--sk-raised-hover);
+		border-color: var(--sk-raised-hover-color);
 	}
 
 	&:active {
-		box-shadow: var(--sk-raised-active);
+		border-color: var(--sk-raised-active-color);
+		border-width: var(--sk-raised-active-width);
 	}
 
 	&:disabled {
-		box-shadow: none;
+		border-color: transparent;
+		border-width: 1px;
 	}
 }
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 6833250023..8abaf52436 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -49,6 +49,7 @@
 	--sk-back-3: hsla(0, 0%, 99%, 1);
 	--sk-back-4: hsl(0, 0%, 95%);
 	--sk-back-5: hsl(0, 0%, 92%);
+	--sk-back-6: hsl(0, 0%, 86%);
 
 	--sk-text-1: hsla(0, 0%, 0%, 0.95);
 	--sk-text-2: hsla(0, 0%, 0%, 0.88);
@@ -86,16 +87,11 @@
 	--shiki-color-background: var(--sk-back-2);
 
 	/* raised buttons */
-	--sk-raised-highlight: hsl(0 0 100 / 0.8);
-	--sk-raised-highlight-active: hsl(0 0 100 / 1);
-	--sk-raised-shadow: hsl(0 0 0 / 0.1);
-	--sk-raised-shadow-active: hsl(0 0 0 / 0.15);
-
-	--sk-raised: 1px 1px 3px var(--sk-raised-shadow), -1px -1px 3px var(--sk-raised-highlight);
-	--sk-raised-hover: 1px 1px 3px var(--sk-raised-shadow-active),
-		-1px -1px 3px var(--sk-raised-highlight-active);
-	--sk-raised-active: inset -1px -1px 2px var(--sk-raised-highlight-active),
-		inset 1px 1px 2px var(--sk-raised-shadow-active);
+	--sk-raised-color: var(--sk-back-4) var(--sk-back-5) var(--sk-back-5) var(--sk-back-4);
+	--sk-raised-width: 1px 2px 2px 1px;
+	--sk-raised-hover-color: var(--sk-back-5) var(--sk-back-6) var(--sk-back-6) var(--sk-back-5);
+	--sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6);
+	--sk-raised-active-width: 2px 1px 1px 2px;
 
 	&.dark {
 		color-scheme: dark;
@@ -105,6 +101,7 @@
 		--sk-back-3: hsl(0 0 12);
 		--sk-back-4: hsl(0 0 22);
 		--sk-back-5: hsl(0 0 25);
+		--sk-back-6: hsl(0 0 32);
 		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
 		--sk-theme-1-hsl: 12, 94%, 62%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
@@ -139,10 +136,9 @@
 		--shiki-color-background: var(--sk-back-3);
 
 		/* raised buttons */
-		--sk-raised-highlight: hsl(0 0 100 / 0.1);
-		--sk-raised-highlight-active: hsl(0 0 100 / 0.15);
-		--sk-raised-shadow: hsl(0 0 0 / 0.3);
-		--sk-raised-shadow-active: hsl(0 0 0 / 0.22);
+		--sk-raised-color: var(--sk-back-5) var(--sk-back-3) var(--sk-back-3) var(--sk-back-5);
+		--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
+		--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
 	}
 }