From 04f9eb228bff6e7bf9effa6b4de9b671ddd4a2b5 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 5 Oct 2026 09:26:51 +0100
Subject: [PATCH] web/ui: drop the dead insetShadow prop and tidy review
 leftovers

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/app.css                               |  2 +-
 web/src/lib/components/home/SignupForm.svelte |  9 +-----
 .../notifications/NotificationBell.svelte     |  2 +-
 .../components/profile/FollowButton.svelte    |  2 --
 .../components/profile/ProfileEditForm.svelte |  2 --
 .../components/profile/ProfileMoreMenu.svelte |  6 ++--
 .../profile/VouchButton.stories.svelte        | 28 ++++---------------
 .../lib/components/profile/VouchButton.svelte |  3 --
 .../lib/components/repo/CloneDropdown.svelte  |  1 -
 web/src/lib/components/repo/DiffView.svelte   | 14 ++--------
 .../components/repo/RepoCreationForm.svelte   |  1 -
 web/src/lib/components/repo/RepoHeader.svelte |  7 +----
 web/src/lib/components/repo/StarButton.svelte |  2 --
 .../components/repo/SubscribeButton.svelte    |  1 -
 .../repo/pulls/PullReviewCommentForm.svelte   | 11 ++------
 .../repo/tickets/TicketToolbar.svelte         |  8 ++----
 web/src/lib/components/shell/Topbar.svelte    |  9 +-----
 .../lib/components/strings/StringForm.svelte  |  1 -
 .../components/timeline/TimelineView.svelte   |  2 --
 .../lib/components/ui/Button.stories.svelte   | 19 -------------
 web/src/lib/components/ui/Button.svelte       | 10 +------
 .../components/ui/ButtonGroup.stories.svelte  |  2 +-
 web/src/lib/components/ui/ButtonGroup.svelte  |  7 ++---
 web/src/lib/components/ui/Dropdown.svelte     |  3 --
 web/src/lib/components/ui/SignupPrompt.svelte |  2 +-
 web/src/routes/dev/components/+page.svelte    | 12 ++++----
 26 files changed, 30 insertions(+), 136 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index bee247f1b..959f9fbc2 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -707,7 +707,7 @@ html {
 @utility row-breathe {
 	animation: row-breathe 1.2s ease-in-out infinite;
 	background-color: var(--color-background-muted);
-	border-radius: var(--radius-md, 0.375rem);
+	border-radius: var(--radius-md, 0.5rem);
 
 	@media (prefers-reduced-motion: reduce) {
 		animation: none;
diff --git a/web/src/lib/components/home/SignupForm.svelte b/web/src/lib/components/home/SignupForm.svelte
index fa2610781..75d00d14c 100644
--- a/web/src/lib/components/home/SignupForm.svelte
+++ b/web/src/lib/components/home/SignupForm.svelte
@@ -25,14 +25,7 @@
 		placeholder="you@example.com"
 		class="min-w-0 flex-1 border-transparent bg-transparent px-md focus-within:border-transparent focus-within:ring-0 hover:border-transparent"
 	/>
-	<Button
-		type="submit"
-		variant="primary"
-		size="large"
-		icon={ArrowRight}
-		iconSide="right"
-		insetShadow={true}
-	>
+	<Button type="submit" variant="primary" size="large" icon={ArrowRight} iconSide="right">
 		{label}
 	</Button>
 </form>
diff --git a/web/src/lib/components/notifications/NotificationBell.svelte b/web/src/lib/components/notifications/NotificationBell.svelte
index 33f0e7ebb..6f424d98b 100644
--- a/web/src/lib/components/notifications/NotificationBell.svelte
+++ b/web/src/lib/components/notifications/NotificationBell.svelte
@@ -130,7 +130,7 @@
 		<a
 			href={viewAll}
 			onclick={dismiss}
-			class="flex items-center justify-end gap-2xs p-xs typography-paragraph-small text-foreground-muted no-underline transition-colors hover:bg-background-subtle hover:text-foreground-default hover:no-underline md:px-md"
+			class="flex items-center justify-end gap-2xs p-xs typography-paragraph-small text-foreground-muted no-underline hover:bg-background-subtle hover:text-foreground-default hover:no-underline md:px-md"
 		>
 			View all
 			<ArrowRight class="size-3.5" aria-hidden="true" />
diff --git a/web/src/lib/components/profile/FollowButton.svelte b/web/src/lib/components/profile/FollowButton.svelte
index 5150514f0..ada89f45e 100644
--- a/web/src/lib/components/profile/FollowButton.svelte
+++ b/web/src/lib/components/profile/FollowButton.svelte
@@ -99,7 +99,6 @@
 			href={resolve("/login")}
 			variant="default"
 			class="w-full gap-xs"
-			insetShadow={true}
 			icon={UserRoundPlus}
 		>
 			Follow
@@ -109,7 +108,6 @@
 			<Button
 				variant={failed ? "danger" : "default"}
 				class="w-full min-w-28 gap-xs"
-				insetShadow={true}
 				disabled={!relation.known || relation.loading}
 				aria-busy={relation.loading}
 				onclick={toggle}
diff --git a/web/src/lib/components/profile/ProfileEditForm.svelte b/web/src/lib/components/profile/ProfileEditForm.svelte
index a905bfdc6..d6f42e75b 100644
--- a/web/src/lib/components/profile/ProfileEditForm.svelte
+++ b/web/src/lib/components/profile/ProfileEditForm.svelte
@@ -95,7 +95,6 @@
 
 	<div class="flex items-center justify-between gap-xs">
 		<Button
-			insetShadow={true}
 			variant="default"
 			class="w-full gap-xs"
 			disabled={save.loading}
@@ -105,7 +104,6 @@
 			Cancel
 		</Button>
 		<Button
-			insetShadow={true}
 			type="submit"
 			variant="default"
 			class="w-full gap-xs"
diff --git a/web/src/lib/components/profile/ProfileMoreMenu.svelte b/web/src/lib/components/profile/ProfileMoreMenu.svelte
index f21fca631..c137c8b0a 100644
--- a/web/src/lib/components/profile/ProfileMoreMenu.svelte
+++ b/web/src/lib/components/profile/ProfileMoreMenu.svelte
@@ -7,16 +7,14 @@
 
 	let {
 		identity,
-		buttonVariant = "ghost",
-		insetShadow = false
+		buttonVariant = "ghost"
 	}: {
 		identity: { did: string; handle: string };
 		buttonVariant?: "default" | "ghost";
-		insetShadow?: boolean;
 	} = $props();
 </script>
 
-<MoreMenu label={`More actions for @${identity.handle}`} {buttonVariant} {insetShadow}>
+<MoreMenu label={`More actions for @${identity.handle}`} {buttonVariant}>
 	<DropdownItem icon={Rss} href={resolve(`/${identity.handle}/feed.atom` as "/")}>
 		Atom feed
 	</DropdownItem>
diff --git a/web/src/lib/components/profile/VouchButton.stories.svelte b/web/src/lib/components/profile/VouchButton.stories.svelte
index 6dcb16845..1c6347f30 100644
--- a/web/src/lib/components/profile/VouchButton.stories.svelte
+++ b/web/src/lib/components/profile/VouchButton.stories.svelte
@@ -55,14 +55,12 @@
 		tags: ["autodocs"],
 		argTypes: {
 			profileLabel: { control: "text" },
-			bordered: { control: "boolean" },
-			insetShadow: { control: "boolean" }
+			bordered: { control: "boolean" }
 		},
 		args: {
 			profileDid: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
 			profileLabel: "joshka.net",
-			bordered: true,
-			insetShadow: true
+			bordered: true
 		}
 	});
 </script>
@@ -102,33 +100,30 @@
 	{/snippet}
 </Story>
 
-<!-- the appearance matrix: bordered vs borderless (both raised), across all three
-	 vouch states. tweak the `bordered`/`insetShadow` controls to compare. -->
+<!-- the appearance matrix: bordered vs borderless, across all three
+	 vouch states. tweak the `bordered` control to compare. -->
 <Story name="Appearance variants" parameters={{ auth: true }}>
 	{#snippet template(args)}
 		<div class="grid grid-cols-2 gap-md">
-			{#each [{ label: "Bordered", bordered: true, insetShadow: true }, { label: "Borderless", bordered: false, insetShadow: true }] as look (look.label)}
+			{#each [{ label: "Bordered", bordered: true }, { label: "Borderless", bordered: false }] as look (look.label)}
 				<div class="space-y-sm">
 					<p class="typography-paragraph-small text-foreground-subtle">{look.label}</p>
 					<VouchButton
 						{...args}
 						profileDid={`did:plc:variant-none-${look.label}`}
 						bordered={look.bordered}
-						insetShadow={look.insetShadow}
 						initialVouch={null}
 					/>
 					<VouchButton
 						{...args}
 						profileDid={`did:plc:variant-vouch-${look.label}`}
 						bordered={look.bordered}
-						insetShadow={look.insetShadow}
 						initialVouch={{ kind: "vouch" }}
 					/>
 					<VouchButton
 						{...args}
 						profileDid={`did:plc:variant-denounce-${look.label}`}
 						bordered={look.bordered}
-						insetShadow={look.insetShadow}
 						initialVouch={{ kind: "denounce" }}
 					/>
 				</div>
@@ -146,19 +141,6 @@
 	{/snippet}
 </Story>
 
-<!-- flat trigger, opting out of the default inset shadow -->
-<Story name="Without shadow" args={{ insetShadow: false }} parameters={{ auth: true }}>
-	{#snippet template(args)}
-		<div class="w-64">
-			<VouchButton
-				{...args}
-				profileDid="did:plc:shadow0000000000000000"
-				initialVouch={null}
-			/>
-		</div>
-	{/snippet}
-</Story>
-
 <!-- submitting hits the mock agent's rejecting fetch, so the modal shows the
 	 error state after pressing Save -->
 <Story name="Submission fails" parameters={{ auth: true }}>
diff --git a/web/src/lib/components/profile/VouchButton.svelte b/web/src/lib/components/profile/VouchButton.svelte
index c15559792..03e7ffbfa 100644
--- a/web/src/lib/components/profile/VouchButton.svelte
+++ b/web/src/lib/components/profile/VouchButton.svelte
@@ -63,7 +63,6 @@
 		initialVouch?: DirectVouch | null;
 		networkVouches?: NetworkVouch[];
 		bordered?: boolean;
-		insetShadow?: boolean;
 		hideLabelOnMobile?: boolean;
 	}
 
@@ -73,7 +72,6 @@
 		initialVouch = null,
 		networkVouches = [],
 		bordered = true,
-		insetShadow = true,
 		hideLabelOnMobile = false
 	}: Props = $props();
 
@@ -176,7 +174,6 @@
 		variant={trigger.variant}
 		class="w-full gap-xs {trigger.colorClass}"
 		icon={trigger.icon}
-		{insetShadow}
 		href={signedIn ? undefined : loginHref}
 		onclick={signedIn ? start : undefined}
 	>
diff --git a/web/src/lib/components/repo/CloneDropdown.svelte b/web/src/lib/components/repo/CloneDropdown.svelte
index d0998db0e..3b07a55b8 100644
--- a/web/src/lib/components/repo/CloneDropdown.svelte
+++ b/web/src/lib/components/repo/CloneDropdown.svelte
@@ -52,7 +52,6 @@
 <Dropdown
 	variant="button"
 	buttonVariant="primary"
-	insetShadow
 	align="right"
 	label="Clone this repository"
 	menuClass="w-96 divide-y-0 p-md"
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index ef665a6ad..0e6b72676 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -86,7 +86,6 @@
 		patchUrl?: string;
 		/** a patch already streaming in parallel with the file list */
 		patch?: PatchStream;
-		stickyOffset?: number;
 		treeCollapsed?: boolean;
 	}
 
@@ -102,7 +101,6 @@
 		downloadUrls,
 		patchUrl,
 		patch,
-		stickyOffset = 0,
 		treeCollapsed = false
 	}: Props = $props();
 
@@ -118,13 +116,9 @@
 	let shell = $state<HTMLDivElement>();
 	let dock = $state(0);
 	let diffScroll = $state(0);
-	const HEADER_GAP = 8;
-	const stickyTop = $derived(stickyOffset ? stickyOffset + HEADER_GAP : 0);
-	const maxHeight = $derived(`calc(100svh - ${stickyTop}px)`);
-	const dockOffset = $derived(stickyTop);
 	const measureDock = () => {
 		if (!shell) return;
-		dock = window.scrollY + shell.getBoundingClientRect().top - dockOffset;
+		dock = window.scrollY + shell.getBoundingClientRect().top;
 	};
 	$effect(() => {
 		const element = shell;
@@ -182,11 +176,7 @@
 	/>
 {:else}
 	<div bind:this={shell} class:select-none={resizing}>
-		<Card
-			padding="none"
-			class="sticky flex gap-xs px-xs"
-			style="top: {stickyTop}px; max-height: {maxHeight}"
-		>
+		<Card padding="none" class="sticky top-0 flex max-h-svh gap-xs px-xs">
 			<!-- file tree -->
 			{#if treeToggled !== false}
 				<aside class={layout.aside()} style:--tree-width="{treeWidth}px">
diff --git a/web/src/lib/components/repo/RepoCreationForm.svelte b/web/src/lib/components/repo/RepoCreationForm.svelte
index 35c325762..c0a34d4f6 100644
--- a/web/src/lib/components/repo/RepoCreationForm.svelte
+++ b/web/src/lib/components/repo/RepoCreationForm.svelte
@@ -336,7 +336,6 @@
 			icon={action.loading ? undefined : icon}
 			aria-busy={action.loading}
 			disabled={!user || !selectedKnot || action.loading}
-			insetShadow={true}
 		>
 			{#if action.loading}
 				<Spinner class={buttonIcon()} />
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index 88c101a18..039b868b8 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -44,17 +44,12 @@
 			<Button
 				href={resolve(`${base}/fork` as "/")}
 				variant="default"
-				insetShadow={true}
 				icon={GitFork}
 				class="flex-1 px-md!"
 			>
 				Fork
 			</Button>
-			<Button
-				href={resolve(`${base}/forks` as "/")}
-				variant="ghost"
-				title="Forked by"
-			>
+			<Button href={resolve(`${base}/forks` as "/")} variant="ghost" title="Forked by">
 				{#if typeof counts === "object" && counts !== null && "then" in counts}
 					<Pending>
 						{#snippet skeleton()}
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 623ce6d45..2036be74c 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -165,7 +165,6 @@
 		<ButtonGroup class="w-full">
 			<Button
 				variant={failed ? "danger" : "default"}
-				insetShadow={true}
 				href={signedIn ? undefined : loginHref}
 				disabled={signedIn && (!relation.known || !subjectKey)}
 				aria-busy={relation.loading}
@@ -192,7 +191,6 @@
 					title="Starred by"
 					class={starsHref ? undefined : "pointer-events-none"}
 					tabindex={starsHref ? undefined : -1}
-					insetShadow={true}
 				>
 					{#if loadedCount === undefined}
 						<Bones
diff --git a/web/src/lib/components/repo/SubscribeButton.svelte b/web/src/lib/components/repo/SubscribeButton.svelte
index 571afe085..08101c4bf 100644
--- a/web/src/lib/components/repo/SubscribeButton.svelte
+++ b/web/src/lib/components/repo/SubscribeButton.svelte
@@ -115,7 +115,6 @@
 	<ButtonGroup>
 		<Button
 			variant={error ? "danger" : "default"}
-			insetShadow={true}
 			href={signedIn ? undefined : loginHref}
 			class="min-w-24"
 			onclick={signedIn ? toggle : undefined}
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
index 310371eac..6588537eb 100644
--- a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
@@ -67,8 +67,7 @@
 		slots: {
 			container: "flex",
 			textarea: "min-w-0 flex-1",
-			button: "",
-			frame: ""
+			button: ""
 		},
 		variants: {
 			grown: {
@@ -82,15 +81,11 @@
 					textarea: "rounded-r-none",
 					button: "-ml-px w-9.5 self-stretch [--btn-radius-l:0px] disabled:border-border-default disabled:bg-background-default"
 				}
-			},
-			disabled: {
-				true: { frame: "border-border-disabled" },
-				false: { frame: "" }
 			}
 		}
 	});
 
-	const composerClasses = $derived(composerLayout({ grown, disabled }));
+	const composerClasses = $derived(composerLayout({ grown }));
 
 	const pinnable = $derived(allowPinToCommit && references.length === 0);
 	const framed = $derived(references.length > 0 || pinnable);
@@ -158,7 +153,7 @@
 
 <form onsubmit={publish.run} class="flex flex-col gap-xs">
 	{#if framed}
-		<LayerCard class={composerClasses.frame()}>
+		<LayerCard class={disabled ? "border-border-disabled" : undefined}>
 			{#if references.length > 0}
 				<ul>
 					{#each references as reference (reference.key)}
diff --git a/web/src/lib/components/repo/tickets/TicketToolbar.svelte b/web/src/lib/components/repo/tickets/TicketToolbar.svelte
index 02830cd10..ec82d7601 100644
--- a/web/src/lib/components/repo/tickets/TicketToolbar.svelte
+++ b/web/src/lib/components/repo/tickets/TicketToolbar.svelte
@@ -83,12 +83,8 @@
 	{/snippet}
 
 	{#snippet trailing()}
-		<Button
-			href={resolve(`${base}/new` as "/")}
-			variant="primary"
-			insetShadow
-			icon={Plus}
-			class="h-full">New</Button
+		<Button href={resolve(`${base}/new` as "/")} variant="primary" icon={Plus} class="h-full"
+			>New</Button
 		>
 	{/snippet}
 </ListToolbar>
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index f913a5e90..fdc3d5d42 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -111,7 +111,6 @@
 					href={resolve("/signup")}
 					icon={ArrowRight}
 					iconSide="right"
-					insetShadow={true}
 				>
 					Join now
 				</Button>
@@ -123,7 +122,6 @@
 
 					<div class={style.action({ class: "order-1 md:order-3" })}>
 						<Dropdown
-							insetShadow={true}
 							size="small"
 							id="new-menu"
 							group="topbar"
@@ -235,12 +233,7 @@
 							<Button variant="ghost" size="small" href={appPath(loginHref)}
 								>Login</Button
 							>
-							<Button
-								variant="primary"
-								size="small"
-								href={resolve("/signup")}
-								insetShadow={true}
-							>
+							<Button variant="primary" size="small" href={resolve("/signup")}>
 								Join now
 							</Button>
 						</div>
diff --git a/web/src/lib/components/strings/StringForm.svelte b/web/src/lib/components/strings/StringForm.svelte
index e6cbb8a05..48e86865c 100644
--- a/web/src/lib/components/strings/StringForm.svelte
+++ b/web/src/lib/components/strings/StringForm.svelte
@@ -166,7 +166,6 @@
 					variant="primary"
 					icon={publish.loading ? Spinner : mode === "edit" ? Check : ArrowUp}
 					disabled={publish.loading}
-					insetShadow={true}
 				>
 					{mode === "edit" ? "Save changes" : "Publish"}
 				</Button>
diff --git a/web/src/lib/components/timeline/TimelineView.svelte b/web/src/lib/components/timeline/TimelineView.svelte
index 8a07e282a..e2ec458cd 100644
--- a/web/src/lib/components/timeline/TimelineView.svelte
+++ b/web/src/lib/components/timeline/TimelineView.svelte
@@ -66,7 +66,6 @@
 						<Button
 							href={toggleHref(false)}
 							variant={followingOnly ? "ghost" : "default"}
-							insetShadow={true}
 							icon={Globe}
 						>
 							Global
@@ -74,7 +73,6 @@
 						<Button
 							href={toggleHref(true)}
 							variant={followingOnly ? "default" : "ghost"}
-							insetShadow={true}
 							icon={UserRoundGroup}
 						>
 							Following
diff --git a/web/src/lib/components/ui/Button.stories.svelte b/web/src/lib/components/ui/Button.stories.svelte
index ab8d7fe64..0278806ac 100644
--- a/web/src/lib/components/ui/Button.stories.svelte
+++ b/web/src/lib/components/ui/Button.stories.svelte
@@ -31,7 +31,6 @@
 				control: { type: "inline-radio" },
 				options: ["left", "right"]
 			},
-			insetShadow: { control: "boolean" },
 			disabled: { control: "boolean" },
 			loading: { control: "boolean" },
 			holdToConfirm: { control: "boolean" }
@@ -40,7 +39,6 @@
 			variant: "default",
 			size: "regular",
 			iconSide: "left",
-			insetShadow: false,
 			disabled: false,
 			loading: false
 		}
@@ -196,13 +194,6 @@
 	Hold to delete
 </Story>
 
-<Story name="Inset shadow" asChild>
-	<div class="flex items-center gap-sm">
-		<Button insetShadow>Button</Button>
-		<Button variant="primary" insetShadow>Save</Button>
-	</div>
-</Story>
-
 <Story name="Sizes" asChild>
 	<div class="flex items-center gap-sm">
 		<Button size="mini">Mini</Button>
@@ -225,13 +216,3 @@
 		<Button size="large" icon={Star}>Large</Button>
 	</div>
 </Story>
-
-<!-- press these: the icon and label sink together while the button box stays put. -->
-<Story name="Icons with inset shadow" asChild>
-	<div class="flex items-center gap-sm">
-		<Button insetShadow icon={Star}>Star</Button>
-		<Button variant="primary" insetShadow icon={GitFork}>Fork</Button>
-		<Button insetShadow icon={ChevronRight} iconSide="right">Next</Button>
-		<Button insetShadow icon={Star} aria-label="Star" />
-	</div>
-</Story>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 6ad3a2581..c44d86f7b 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -27,7 +27,7 @@
 					"aria-disabled:border-transparent aria-disabled:bg-background-subtle aria-disabled:text-foreground-subtle"
 				],
 				primary: ["[--btn-brand:var(--color-background-info-emphasis)]", ...emphasis],
-				destructive: ["[--btn-brand:oklch(50.5%_0.213_27.518)]", ...emphasis],
+				destructive: ["[--btn-brand:var(--color-red-700)]", ...emphasis],
 				ghost: [
 					"border border-transparent bg-transparent",
 					"hover:bg-background-inset aria-expanded:bg-background-inset",
@@ -65,10 +65,6 @@
 				right: "",
 				none: ""
 			},
-			insetShadow: {
-				true: "",
-				false: ""
-			},
 			square: {
 				true: "min-w-0 px-0",
 				false: ""
@@ -92,7 +88,6 @@
 			variant: "default",
 			size: "regular",
 			iconSide: "none",
-			insetShadow: false,
 			square: false
 		}
 	});
@@ -141,7 +136,6 @@
 	> {
 		variant?: ButtonVariants["variant"];
 		size?: ButtonVariants["size"];
-		insetShadow?: boolean;
 		square?: boolean;
 		href?: ResolvedPathname;
 		type?: "button" | "submit" | "reset";
@@ -160,7 +154,6 @@
 	let {
 		variant = "default",
 		size = "regular",
-		insetShadow = false,
 		square,
 		href,
 		type = "button",
@@ -181,7 +174,6 @@
 		button({
 			variant,
 			size,
-			insetShadow,
 			square: square ?? Boolean(icon && !children),
 			iconSide: icon && children ? iconSide : "none",
 			class: className
diff --git a/web/src/lib/components/ui/ButtonGroup.stories.svelte b/web/src/lib/components/ui/ButtonGroup.stories.svelte
index 7d32e6572..bf055fe13 100644
--- a/web/src/lib/components/ui/ButtonGroup.stories.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.stories.svelte
@@ -51,7 +51,7 @@
 
 <!--
 	The tab/segment-switcher recipe (Open/Closed issue filters, Write/Preview editor tabs):
-	the selected segment gets the `default` variant + insetShadow, unselected segments are
+	the selected segment gets the `default` variant, unselected segments are
 	`ghost`. Never plain `default` for unselected — that reads as the hovered state.
 -->
 <Story name="Tab Switcher">
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 5df9e21a1..bd05da335 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -11,7 +11,7 @@
 			},
 			segmented: {
 				true: [
-					"items-stretch rounded-md bg-[oklch(96%_0_0)] p-0.5 ring ring-border-default/70 dark:bg-background-canvas",
+					"items-stretch rounded-md bg-background-inset p-0.5 ring ring-border-default/70 dark:bg-background-canvas",
 					"[--seg-inset:4px] *:[--btn-radius:calc(var(--radius-md)-2px)]",
 					"[&>*:focus-visible]:-outline-offset-2"
 				],
@@ -54,18 +54,15 @@
 
 	export function segmentProps(selected: boolean): {
 		variant: ButtonVariants["variant"];
-		insetShadow: boolean;
 		class?: string;
 	} {
 		return selected
 			? {
 					variant: "default",
-					insetShadow: true,
-					class: "border-[oklch(14.5%_0_0/0.1)] shadow-sm hover:bg-background-default dark:border-alpha-dark-10"
+					class: "border-alpha-dark-10 shadow-sm hover:bg-background-default"
 				}
 			: {
 					variant: "ghost",
-					insetShadow: false,
 					class: "text-foreground-muted hover:bg-transparent hover:text-foreground-default"
 				};
 	}
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index 3039be292..a714c60e4 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -31,7 +31,6 @@
 		variant?: "plain" | "button";
 		buttonVariant?: ButtonVariants["variant"];
 		size?: ButtonVariants["size"];
-		insetShadow?: ButtonVariants["insetShadow"];
 		square?: boolean;
 		align?: DropdownVariants["align"];
 		label?: string;
@@ -84,7 +83,6 @@
 		group,
 		variant = "plain",
 		buttonVariant = "default",
-		insetShadow = false,
 		square,
 		size,
 		align = "left",
@@ -219,7 +217,6 @@
 		aria-expanded={open}
 		aria-controls={menuId}
 		aria-label={label}
-		{insetShadow}
 		{square}
 		{disabled}
 	>
diff --git a/web/src/lib/components/ui/SignupPrompt.svelte b/web/src/lib/components/ui/SignupPrompt.svelte
index fc5324b0e..28ada3356 100644
--- a/web/src/lib/components/ui/SignupPrompt.svelte
+++ b/web/src/lib/components/ui/SignupPrompt.svelte
@@ -13,7 +13,7 @@
 <div
 	class="flex flex-wrap items-center gap-xs rounded-md border border-background-info-subtle-hover bg-background-info-subtle p-md"
 >
-	<Button variant="primary" insetShadow={true} href={resolve("/signup")}>Sign up</Button>
+	<Button variant="primary" href={resolve("/signup")}>Sign up</Button>
 	<span>
 		or
 		<Link href={resolve("/login")} class="underline">Login</Link>
diff --git a/web/src/routes/dev/components/+page.svelte b/web/src/routes/dev/components/+page.svelte
index a16872796..45401309b 100644
--- a/web/src/routes/dev/components/+page.svelte
+++ b/web/src/routes/dev/components/+page.svelte
@@ -220,8 +220,8 @@
 
 {#snippet button()}
 	<div class="grid gap-sm">
-		<Button insetShadow>Create repository</Button>
-		<Button variant="primary" insetShadow icon={GitFork}>Fork</Button>
+		<Button>Create repository</Button>
+		<Button variant="primary" icon={GitFork}>Fork</Button>
 		<Button variant="ghost" icon={Star}>Star</Button>
 	</div>
 {/snippet}
@@ -269,7 +269,7 @@
 {/snippet}
 
 {#snippet modal()}
-	<Button insetShadow onclick={() => (modalOpen = true)}>Open modal</Button>
+	<Button onclick={() => (modalOpen = true)}>Open modal</Button>
 	<Modal bind:open={modalOpen} title="Delete this branch?" description="This cannot be undone.">
 		{#snippet footer()}
 			<Button class="flex-1" onclick={() => (modalOpen = false)}>Cancel</Button>
@@ -358,7 +358,7 @@
 {/snippet}
 
 {#snippet confirmModal()}
-	<Button variant="danger" insetShadow onclick={() => (confirmOpen = true)}>Delete</Button>
+	<Button variant="danger" onclick={() => (confirmOpen = true)}>Delete</Button>
 	<ConfirmModal
 		bind:open={confirmOpen}
 		title="Delete this?"
@@ -614,7 +614,7 @@
 {/snippet}
 
 {#snippet toggleFaces()}
-	<Button insetShadow class="min-w-22" onclick={() => (starred = !starred)}>
+	<Button class="min-w-22" onclick={() => (starred = !starred)}>
 		<ToggleFaces on={starred} size="small" offLabel="Star" onLabel="Starred">
 			{#snippet off(cls)}
 				<Star class={cls} />
@@ -715,7 +715,7 @@
 {/snippet}
 
 {#snippet listTrailing()}
-	<Button size="small" variant="primary" insetShadow>New</Button>
+	<Button size="small" variant="primary">New</Button>
 {/snippet}
 
 {#snippet listToolbar()}
-- 
2.51.2