refactor(site): rename border-hover token to border-secondary (#24553)

Renames the `--border-hover` design token to `--border-secondary` and
updates the color values to work well on `surface-secondary`
backgrounds, preparing for the template creation flow.

- Light theme: `240 5% 65%` (`#A1A1AA`)
- Dark theme: `240 5% 26%` (`#3F3F46`)

All 7 component usages updated to use the new token name.

<details>
<summary>Context</summary>

The previous `border-hover` token used a single value (`#52525B`) for
both themes, which didn't provide enough contrast on `surface-secondary`
backgrounds. The rename to `border-secondary` better reflects its
semantic role as a secondary border color rather than a hover-specific
one, and the updated values give proper contrast in both light and dark
themes. This change is a prerequisite for the upcoming template creation
flow work.

</details>

> 🤖 Generated by Coder Agents

site/src/components/Checkbox/Checkbox.tsx

@@ -29,7 +29,7 @@ export const Checkbox: React.FC<
 				"data-[state=indeterminate]:bg-surface-invert-primary",
 				"data-[state=indeterminate]:text-content-invert",
 				"data-[state=indeterminate]:border-surface-invert-primary",
-				"hover:enabled:border-border-hover",
+				"hover:enabled:border-border-secondary",
 				"hover:data-[state=checked]:bg-surface-invert-secondary",
 				"hover:data-[state=checked]:border-surface-invert-secondary",
 				"hover:data-[state=indeterminate]:bg-surface-invert-secondary",

site/src/components/MultiUserSelect/MultiUserSelect.tsx

@@ -257,7 +257,7 @@ const UserRow = <T extends SelectedUser>({
 			tabIndex={-1}
 			className={cn(
 				"cursor-pointer",
-				"hover:[&>div]:ring-1 hover:[&>div]:ring-inset hover:[&>div]:ring-border-hover",
+				"hover:[&>div]:ring-1 hover:[&>div]:ring-inset hover:[&>div]:ring-border-secondary",
 				checked
 					? "[&>div]:bg-surface-secondary hover:[&>div]:bg-surface-secondary"
 					: undefined,

site/src/components/RadioGroup/RadioGroup.tsx

@@ -27,7 +27,7 @@ export const RadioGroupItem: React.FC<
 				focus:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 				focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary
 				disabled:cursor-not-allowed disabled:opacity-25 disabled:border-surface-invert-primary
-				hover:border-border-hover data-[state=checked]:border-border-hover`,
+				hover:border-border-secondary data-[state=checked]:border-border-secondary`,
 				className,
 			)}
 			{...props}

site/src/components/Table/Table.tsx

@@ -72,7 +72,7 @@ const tableRowVariants = cva(
 			hover: {
 				false: null,
 				true: cn(
-					"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-hover",
+					"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-secondary",
 					"first:rounded-t-md last:rounded-b-md",
 				),
 			},

site/src/hooks/useClickableTableRow.ts

@@ -56,7 +56,7 @@ export const useClickableTableRow = <
 	return {
 		...clickableProps,
 		className: cn([
-			"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-hover",
+			"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-secondary",
 			"first:rounded-t-md last:rounded-b-md",
 		]),
 		hover: true,

site/src/index.css

@@ -48,7 +48,7 @@
 		--border-magenta: 295, 68%, 46%;
 		--border-warning: 30.66, 97.16%, 72.35%;
 		--border-destructive: 0 84% 60%;
-		--border-hover: 240 5% 34%;
+		--border-secondary: 240 5% 65%;
 		--overlay-default: 240 5% 84% / 80%;
 		--radius: 0.5rem;
 		--highlight-purple: 271, 61%, 35%;
@@ -121,7 +121,7 @@
 		--border-destructive: 0 91% 71%;
 		--border-sky: 194 90% 62%;
 		--border-green: 143 77% 87%;
-		--border-hover: 240, 5%, 34%;
+		--border-secondary: 240 5% 26%;
 		--overlay-default: 240 10% 4% / 80%;
 		--highlight-purple: 269, 100%, 74%;
 		--highlight-green: 141 79% 85%;

site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx

@@ -85,7 +85,7 @@ const SourcePill: FC<{ source: { url: string; title: string } }> = ({
 				"px-2.5 py-1 text-xs leading-none text-content-secondary",
 				"no-underline transition-colors",
 				"hover:bg-surface-tertiary hover:text-content-primary",
-				"hover:border-border-hover",
+				"hover:border-border-secondary",
 				"max-w-[200px]",
 			)}
 		>

site/src/pages/TaskPage/TaskPage.tsx

@@ -350,7 +350,7 @@ const TaskPage = () => {
 					)}
 				</Panel>
 				<PanelResizeHandle>
-					<div className="w-1 bg-border h-full hover:bg-border-hover transition-all relative" />
+					<div className="w-1 bg-border h-full hover:bg-border-secondary transition-all relative" />
 				</PanelResizeHandle>
 				<Panel className="[&>*]:h-full">
 					<TaskApps task={task} workspace={workspace} />

site/tailwind.config.js

@@ -75,7 +75,7 @@ module.exports = {
 					pending: "hsl(var(--border-sky))",
 					destructive: "hsl(var(--border-destructive))",
 					success: "hsl(var(--border-success))",
-					hover: "hsl(var(--border-hover))",
+					secondary: "hsl(var(--border-secondary))",
 					purple: "hsl(var(--border-purple))",
 					magenta: "hsl(var(--border-magenta))",
 				},