From 5cce3ee5f461a313528c1ba2f4aabca3b98a8f9b Mon Sep 17 00:00:00 2001
From: christin <46345125+chrifro@users.noreply.github.com>
Date: Wed, 22 Apr 2026 09:54:28 +0200
Subject: [PATCH] refactor(site): rename border-hover token to border-secondary
(#24553)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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.
Context
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.
> 🤖 Generated by Coder Agents
---
site/src/components/Checkbox/Checkbox.tsx | 2 +-
site/src/components/MultiUserSelect/MultiUserSelect.tsx | 2 +-
site/src/components/RadioGroup/RadioGroup.tsx | 2 +-
site/src/components/Table/Table.tsx | 2 +-
site/src/hooks/useClickableTableRow.ts | 2 +-
site/src/index.css | 4 ++--
.../components/ChatElements/tools/WebSearchSources.tsx | 2 +-
site/src/pages/TaskPage/TaskPage.tsx | 2 +-
site/tailwind.config.js | 2 +-
9 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/site/src/components/Checkbox/Checkbox.tsx b/site/src/components/Checkbox/Checkbox.tsx
index 52aee5c203..34daa4433b 100644
--- a/site/src/components/Checkbox/Checkbox.tsx
+++ b/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",
diff --git a/site/src/components/MultiUserSelect/MultiUserSelect.tsx b/site/src/components/MultiUserSelect/MultiUserSelect.tsx
index c9f2407db2..a395b78e76 100644
--- a/site/src/components/MultiUserSelect/MultiUserSelect.tsx
+++ b/site/src/components/MultiUserSelect/MultiUserSelect.tsx
@@ -257,7 +257,7 @@ const UserRow = ({
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,
diff --git a/site/src/components/RadioGroup/RadioGroup.tsx b/site/src/components/RadioGroup/RadioGroup.tsx
index dca02173d5..0617292b14 100644
--- a/site/src/components/RadioGroup/RadioGroup.tsx
+++ b/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}
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
index 5d7ede9420..56a737357c 100644
--- a/site/src/components/Table/Table.tsx
+++ b/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",
),
},
diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
index 562e1c0cac..1403dab573 100644
--- a/site/src/hooks/useClickableTableRow.ts
+++ b/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,
diff --git a/site/src/index.css b/site/src/index.css
index d6a172bb11..10292db8bd 100644
--- a/site/src/index.css
+++ b/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%;
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx
index c6c5e39e1a..815356f995 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/WebSearchSources.tsx
+++ b/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]",
)}
>
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
index c4eafd6d7b..fca9824c2c 100644
--- a/site/src/pages/TaskPage/TaskPage.tsx
+++ b/site/src/pages/TaskPage/TaskPage.tsx
@@ -350,7 +350,7 @@ const TaskPage = () => {
)}
-
+
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index e6d81f0053..839299b1d3 100644
--- a/site/tailwind.config.js
+++ b/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))",
},