From 23f9e2679654758eb55ebb19f7c3b1496ba62524 Mon Sep 17 00:00:00 2001 From: christin <46345125+chrifro@users.noreply.github.com> Date: Sat, 18 Apr 2026 14:39:55 +0200 Subject: [PATCH] refactor(site): replace shadcn color aliases with semantic design tokens (#24284) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The shadcn-compatible CSS aliases (`--background`, `--foreground`, `--muted`, `--muted-foreground`, `--primary`, `--primary-foreground`) were added as part of the Coder agents work with hardcoded HSL values that duplicated existing semantic design tokens. These non-standard color classes (`bg-muted`, `text-muted-foreground`, `text-foreground`) had started spreading through components like Table, MultiUserSelect, and WorkspacesTable. This PR makes two changes: 1. **CSS aliases now derive from canonical tokens via `var()` references** instead of duplicating HSL values. The aliases remain for `streamdown` and other external consumers, but `--background` now resolves to `--surface-primary` (`#FFFFFF` in light, was `#FAFAFA`), and the rest map to their semantic equivalents (`--content-primary`, `--surface-secondary`, `--content-secondary`, `--content-link`). 2. **Component classes replaced with semantic equivalents:** - `bg-muted` → `bg-surface-secondary` - `text-muted-foreground` → `text-content-secondary` - `text-foreground` → `text-content-primary` - `text-amber-400` → `text-content-warning` - `hsl(var(--background))` → `hsl(var(--surface-primary))` - `hsl(var(--muted-foreground))` → `hsl(var(--content-secondary))` > This PR was initially created by Claude Opus 4. Co-authored-by: Jaayden Halko Co-authored-by: Jaayden Halko --- site/src/components/Chart/Chart.tsx | 6 ++--- site/src/components/Table/Table.tsx | 6 ++--- site/src/index.css | 24 +++++++++---------- site/src/modules/resources/AgentExternal.tsx | 2 +- .../components/ChatElements/Shimmer.tsx | 4 ++-- .../components/GitPanel/GitPanel.tsx | 4 +++- .../pages/WorkspacesPage/WorkspacesTable.tsx | 2 +- 7 files changed, 25 insertions(+), 23 deletions(-) diff --git a/site/src/components/Chart/Chart.tsx b/site/src/components/Chart/Chart.tsx index e4975dcf00..2043bca13b 100644 --- a/site/src/components/Chart/Chart.tsx +++ b/site/src/components/Chart/Chart.tsx @@ -223,7 +223,7 @@ export const ChartTooltipContent: React.FC = ({
svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", + "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-content-secondary", indicator === "dot" && "items-center", )} > @@ -263,12 +263,12 @@ export const ChartTooltipContent: React.FC = ({ >
{nestLabel ? tooltipLabel : null} - + {itemConfig?.label || item.name}
{item.value && ( - + {item.value.toLocaleString()} )} diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx index 7ce1dcf203..5d7ede9420 100644 --- a/site/src/components/Table/Table.tsx +++ b/site/src/components/Table/Table.tsx @@ -54,7 +54,7 @@ export const TableFooter: React.FC> = ({ return ( tr]:last:border-b-0", + "border-t bg-surface-secondary/50 font-medium [&>tr]:last:border-b-0", className, )} {...props} @@ -65,7 +65,7 @@ export const TableFooter: React.FC> = ({ const tableRowVariants = cva( [ "border-0 border-b border-solid border-border transition-colors", - "data-[state=selected]:bg-muted", + "data-[state=selected]:bg-surface-secondary", ], { variants: { @@ -95,7 +95,7 @@ export const TableRow: React.FC = ({ = ({ agent, workspace }) => { } return ( -
+

Please run the following command to attach an agent to the{" "} {workspace.name} workspace: diff --git a/site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx b/site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx index d40087ad0a..4538fdf252 100644 --- a/site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx +++ b/site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx @@ -49,7 +49,7 @@ const ShimmerComponent = ({ animate={{ backgroundPosition: "0% center" }} className={cn( "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent", - "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),hsl(var(--background)),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]", + "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),hsl(var(--surface-primary)),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]", className, )} initial={{ backgroundPosition: "100% center" }} @@ -57,7 +57,7 @@ const ShimmerComponent = ({ { "--spread": `${dynamicSpread}px`, backgroundImage: - "var(--bg), linear-gradient(hsl(var(--muted-foreground)), hsl(var(--muted-foreground)))", + "var(--bg), linear-gradient(hsl(var(--content-secondary)), hsl(var(--content-secondary)))", } as CSSProperties } transition={{ diff --git a/site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx b/site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx index 4d1be06ab9..6ed07a3008 100644 --- a/site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx +++ b/site/src/pages/AgentsPage/components/GitPanel/GitPanel.tsx @@ -215,7 +215,9 @@ export const GitPanel: FC = ({ diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 52f96e6e5e..9ec112afba 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -341,7 +341,7 @@ const WorkspacesRow: FC = ({ {...clickableProps} data-testid={`workspace-${workspace.id}`} className={cn([ - checked ? "bg-muted hover:bg-muted" : undefined, + checked ? "bg-surface-secondary hover:bg-surface-secondary" : undefined, clickableProps.className, ])} >