From fefaa45b7077e10dbd5f3e02c20b264a05720c2f Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 21 Jun 2026 00:20:54 +0200
Subject: [PATCH] refactor: replace shadcn color vocabulary with semantic
 tokens

Remove the shadcn/ui color tokens (background, foreground, card, popover,
muted, accent, secondary, destructive, input) and migrate every usage to
LibreChat semantic surface/text/border tokens.

Add surface-inverted/text-inverted for the neutral inverted CTA and
surface-fixed/text-fixed for controls that must not flip with the theme
(favicon chips, QR container, carousel arrows). New tokens are defined once
in style.css (light + dark), createTailwindColors, the theme types,
applyTheme and the default/dark theme objects so they stay overridable at
runtime.

Collapse paired dark: color variants into the dark-aware tokens and tokenize
the remaining raw palette and white/black utilities, mapping status colors to
the status-* tokens and legacy ring-black/ring-white focus rings to
ring-text-primary.

Retain the background, primary and ring tokens, which are still referenced by
the SidePanel/Agents and SidePanel/Builder panels (excluded from this pass).
---
 client/src/components/Agents/AgentDetail.tsx  |  4 +-
 .../components/Agents/AgentDetailContent.tsx  |  4 +-
 client/src/components/Agents/AgentGrid.tsx    |  4 +-
 client/src/components/Agents/SearchBar.tsx    |  2 +-
 .../Agents/VirtualizedAgentGrid.tsx           |  4 +-
 .../tests/AgentGrid.integration.spec.tsx      |  2 +-
 .../tests/VirtualizedAgentGrid.test.tsx       |  2 +-
 client/src/components/Chat/Input/ChatForm.tsx |  2 +-
 .../Chat/Input/Files/FileUpload.tsx           |  2 +-
 .../Chat/Input/Files/ImagePreview.tsx         |  2 +-
 .../Chat/Input/Files/MyFilesModal.tsx         |  2 +-
 .../Chat/Input/Files/ProgressCircle.tsx       |  2 +-
 .../Files/Table/ColumnVisibilityDropdown.tsx  |  2 +-
 .../Chat/Input/Files/Table/DataTable.tsx      |  4 +-
 .../Input/Files/Table/SortFilterHeader.tsx    |  2 +-
 .../components/Chat/Input/MCPConfigDialog.tsx |  2 +-
 .../Chat/Input/TokenUsage/index.tsx           |  2 +-
 client/src/components/Chat/Landing.tsx        |  2 +-
 .../Chat/Menus/Endpoints/CustomMenu.tsx       |  7 +--
 .../Chat/Menus/Presets/EditPresetDialog.tsx   |  2 +-
 .../Chat/Menus/Presets/PresetItems.tsx        |  4 +-
 .../Chat/Messages/Content/Image.tsx           |  2 +-
 .../Chat/Messages/Content/MessageContent.tsx  |  2 +-
 .../Chat/Messages/Content/Parts/EmptyText.tsx |  2 +-
 .../Messages/Content/Parts/SubagentCall.tsx   |  4 +-
 .../Chat/Messages/Content/Parts/Summary.tsx   |  2 +-
 .../Chat/Messages/Content/Parts/Thinking.tsx  |  2 +-
 .../Chat/Messages/Content/SearchContent.tsx   |  2 +-
 .../Chat/Messages/Content/ToolCallGroup.tsx   |  2 +-
 .../Messages/Content/UIResourceCarousel.tsx   |  4 +-
 .../src/components/Chat/Messages/Feedback.tsx |  2 +-
 client/src/components/Chat/Messages/Fork.tsx  | 10 ++--
 .../components/Chat/Messages/HoverButtons.tsx |  2 +-
 .../src/components/Chat/Messages/Message.tsx  |  2 +-
 .../components/Chat/Messages/MessageNav.tsx   |  4 +-
 .../components/Chat/Messages/MessageParts.tsx |  2 +-
 .../components/Chat/Messages/MessagesView.tsx |  2 +-
 .../Chat/Messages/MinimalHoverButtons.tsx     |  2 +-
 .../Chat/Messages/MinimalMessages.tsx         |  2 +-
 .../Chat/Messages/SiblingSwitch.tsx           |  2 +-
 .../components/Conversations/RenameForm.tsx   |  4 +-
 .../Endpoints/Settings/Examples.tsx           |  4 +-
 client/src/components/Files/ActionButton.tsx  |  2 +-
 .../Files/FileList/DataTableFile.tsx          | 10 ++--
 .../Files/FileList/UploadFileButton.tsx       |  2 +-
 .../Files/FileList/UploadFileModal.tsx        |  4 +-
 .../Files/VectorStore/VectorStoreButton.tsx   |  2 +-
 .../Input/Generations/Regenerate.tsx          |  2 +-
 .../src/components/Input/Generations/Stop.tsx |  2 +-
 .../Input/ModelSelect/MultiSelectDropDown.tsx | 18 +++---
 .../Input/ModelSelect/MultiSelectPop.tsx      | 14 ++---
 .../Input/ModelSelect/SelectDropDownPop.tsx   |  6 +-
 .../Input/SetKeyDialog/GoogleConfig.tsx       |  2 +-
 .../Input/SetKeyDialog/SetKeyDialog.tsx       |  2 +-
 .../src/components/MCP/MCPServerMenuItem.tsx  |  2 +-
 .../components/MCP/MCPServerStatusIcon.tsx    |  6 +-
 .../components/Messages/MessageContent.tsx    |  2 +-
 .../components/Nav/Bookmarks/BookmarkNav.tsx  |  2 +-
 client/src/components/Nav/NavToggle.tsx       |  4 +-
 client/src/components/Nav/Settings/Dialog.tsx |  2 +-
 .../SettingsTabs/Account/BackupCodesItem.tsx  |  8 +--
 .../SettingsTabs/Account/DeleteAccount.tsx    |  4 +-
 .../Account/TwoFactorAuthentication.tsx       |  2 +-
 .../Account/TwoFactorPhases/DisablePhase.tsx  |  2 +-
 .../Account/TwoFactorPhases/QRPhase.tsx       |  2 +-
 .../Nav/SettingsTabs/ApiKeys/ApiKeys.tsx      |  2 +-
 .../Nav/SettingsTabs/Data/SharedLinks.tsx     |  6 +-
 .../General/ArchivedChatsModal.tsx            |  2 +-
 .../General/ArchivedChatsTable.tsx            |  2 +-
 client/src/components/OAuth/OAuthError.tsx    |  2 +-
 .../Plugins/Store/PluginAuthForm.tsx          |  4 +-
 .../Plugins/Store/PluginPagination.tsx        | 10 ++--
 .../Prompts/display/PromptVersions.tsx        |  8 +--
 .../Prompts/fields/CategorySelector.tsx       |  2 +-
 .../components/Prompts/forms/PromptForm.tsx   |  2 +-
 .../components/Prompts/forms/VariableForm.tsx |  4 +-
 client/src/components/Share/Message.tsx       |  2 +-
 client/src/components/Share/MessagesView.tsx  |  4 +-
 client/src/components/Share/ShareView.tsx     |  2 +-
 .../Sharing/GenericGrantAccessDialog.tsx      |  4 +-
 .../PeoplePicker/SelectedPrincipalsList.tsx   |  8 +--
 .../Sharing/PublicSharingToggle.tsx           |  6 +-
 .../components/Skills/buttons/SkillToggle.tsx |  2 +-
 .../Skills/forms/CategorySelector.tsx         |  2 +-
 client/src/components/Tools/MCPToolItem.tsx   |  4 +-
 client/src/components/Tools/ToolItem.tsx      |  6 +-
 client/src/components/Web/SourceHovercard.tsx |  6 +-
 client/src/components/Web/Sources.tsx         | 10 ++--
 .../components/Web/SourcesErrorBoundary.tsx   |  2 +-
 client/src/hooks/Endpoint/UnknownIcon.tsx     |  4 +-
 client/src/routes/RouteErrorBoundary.tsx      |  6 +-
 client/src/routes/Search.tsx                  |  2 +-
 client/src/style.css                          | 42 +++++--------
 client/src/utils/buildTree.ts                 |  4 +-
 client/src/utils/index.ts                     |  8 +--
 packages/client/src/components/Accordion.tsx  |  2 +-
 .../client/src/components/AlertDialog.tsx     | 11 ++--
 .../src/components/AnimatedSearchInput.tsx    |  4 +-
 packages/client/src/components/Breadcrumb.tsx |  6 +-
 packages/client/src/components/Button.tsx     | 15 +++--
 packages/client/src/components/Checkbox.tsx   |  2 +-
 packages/client/src/components/Combobox.tsx   | 20 +++----
 packages/client/src/components/DataTable.tsx  |  4 +-
 .../src/components/DataTable/DataTable.tsx    |  2 +-
 .../DataTable/DataTableErrorBoundary.tsx      |  4 +-
 packages/client/src/components/Dialog.tsx     | 23 ++++---
 .../client/src/components/DialogTemplate.tsx  | 12 ++--
 packages/client/src/components/Dropdown.tsx   |  6 +-
 .../client/src/components/DropdownMenu.tsx    | 10 ++--
 .../client/src/components/DropdownNoState.tsx |  8 +--
 .../client/src/components/DropdownPopup.tsx   |  2 +-
 .../client/src/components/FilterInput.tsx     |  4 +-
 packages/client/src/components/Input.tsx      |  2 +-
 .../client/src/components/InputNumber.tsx     |  2 +-
 packages/client/src/components/InputOTP.tsx   |  6 +-
 .../src/components/InputWithDropDown.tsx      |  6 +-
 packages/client/src/components/Label.tsx      |  2 +-
 .../client/src/components/MultiSelect.tsx     |  8 +--
 .../src/components/OGDialogTemplate.tsx       |  4 +-
 .../client/src/components/OriginalDialog.tsx  |  4 +-
 packages/client/src/components/Progress.tsx   |  7 ++-
 packages/client/src/components/Radio.tsx      | 12 ++--
 packages/client/src/components/Resizable.tsx  |  8 +--
 .../client/src/components/SecretInput.tsx     |  2 +-
 packages/client/src/components/Select.tsx     | 22 +++----
 .../client/src/components/SelectDropDown.tsx  | 20 +++----
 packages/client/src/components/Slider.tsx     |  8 ++-
 packages/client/src/components/Switch.tsx     |  4 +-
 packages/client/src/components/Table.tsx      |  8 +--
 packages/client/src/components/Tabs.tsx       |  2 +-
 packages/client/src/components/Textarea.tsx   |  2 +-
 .../client/src/components/ThemeSelector.tsx   |  4 +-
 packages/client/src/svgs/DotsIcon.tsx         |  2 +-
 packages/client/src/svgs/NewChatIcon.tsx      |  2 +-
 packages/client/src/svgs/SendIcon.tsx         |  2 +-
 .../client/src/svgs/StopGeneratingIcon.tsx    |  2 +-
 packages/client/src/theme/themes/dark.ts      | 28 ++++-----
 packages/client/src/theme/themes/default.ts   | 28 ++++-----
 packages/client/src/theme/types/index.ts      | 60 +++++++------------
 packages/client/src/theme/utils/applyTheme.ts | 20 +++----
 .../src/theme/utils/createTailwindColors.js   | 33 +++-------
 141 files changed, 379 insertions(+), 455 deletions(-)

diff --git a/client/src/components/Agents/AgentDetail.tsx b/client/src/components/Agents/AgentDetail.tsx
index 4f71bb114f..9fa05a4d93 100644
--- a/client/src/components/Agents/AgentDetail.tsx
+++ b/client/src/components/Agents/AgentDetail.tsx
@@ -117,7 +117,7 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
 
     if (name && email) {
       return (
-        <a href={`mailto:${email}`} className="text-primary hover:underline">
+        <a href={`mailto:${email}`} className="text-text-primary hover:underline">
           {name}
         </a>
       );
@@ -125,7 +125,7 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
 
     if (email) {
       return (
-        <a href={`mailto:${email}`} className="text-primary hover:underline">
+        <a href={`mailto:${email}`} className="text-text-primary hover:underline">
           {email}
         </a>
       );
diff --git a/client/src/components/Agents/AgentDetailContent.tsx b/client/src/components/Agents/AgentDetailContent.tsx
index 7a2a95401d..b9d724e461 100644
--- a/client/src/components/Agents/AgentDetailContent.tsx
+++ b/client/src/components/Agents/AgentDetailContent.tsx
@@ -116,7 +116,7 @@ const AgentDetailContent: React.FC<AgentDetailContentProps> = ({ agent }) => {
 
     if (name && email) {
       return (
-        <a href={`mailto:${email}`} className="text-primary hover:underline">
+        <a href={`mailto:${email}`} className="text-text-primary hover:underline">
           {name}
         </a>
       );
@@ -124,7 +124,7 @@ const AgentDetailContent: React.FC<AgentDetailContentProps> = ({ agent }) => {
 
     if (email) {
       return (
-        <a href={`mailto:${email}`} className="text-primary hover:underline">
+        <a href={`mailto:${email}`} className="text-text-primary hover:underline">
           {email}
         </a>
       );
diff --git a/client/src/components/Agents/AgentGrid.tsx b/client/src/components/Agents/AgentGrid.tsx
index 285df3dc74..991f5e186e 100644
--- a/client/src/components/Agents/AgentGrid.tsx
+++ b/client/src/components/Agents/AgentGrid.tsx
@@ -129,7 +129,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({
   // Simple loading spinner
   const loadingSpinner = (
     <div className="flex justify-center py-12">
-      <Spinner className="h-8 w-8 text-primary" />
+      <Spinner className="h-8 w-8 text-text-primary" />
     </div>
   );
 
@@ -207,7 +207,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({
               aria-live="polite"
               aria-label={localize('com_agents_loading')}
             >
-              <Spinner className="h-6 w-6 text-primary" />
+              <Spinner className="h-6 w-6 text-text-primary" />
               <span className="sr-only">{localize('com_agents_loading')}</span>
             </div>
           )}
diff --git a/client/src/components/Agents/SearchBar.tsx b/client/src/components/Agents/SearchBar.tsx
index 7fab811b4c..652fae974d 100644
--- a/client/src/components/Agents/SearchBar.tsx
+++ b/client/src/components/Agents/SearchBar.tsx
@@ -92,7 +92,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ value, onSearch, className = '' }
         <button
           type="button"
           onClick={handleClear}
-          className="group absolute right-4 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          className="group absolute right-4 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-text-primary focus:ring-offset-2"
           aria-label={localize('com_agents_clear_search')}
           title={localize('com_agents_clear_search')}
         >
diff --git a/client/src/components/Agents/VirtualizedAgentGrid.tsx b/client/src/components/Agents/VirtualizedAgentGrid.tsx
index a2843c5b20..d5f026cb13 100644
--- a/client/src/components/Agents/VirtualizedAgentGrid.tsx
+++ b/client/src/components/Agents/VirtualizedAgentGrid.tsx
@@ -188,7 +188,7 @@ const VirtualizedAgentGrid: React.FC<VirtualizedAgentGridProps> = ({
               aria-live="polite"
               aria-label={localize('com_agents_loading')}
             >
-              <Spinner className="h-6 w-6 text-primary" />
+              <Spinner className="h-6 w-6 text-text-primary" />
               <span className="sr-only">{localize('com_agents_loading')}</span>
             </div>
           )}
@@ -209,7 +209,7 @@ const VirtualizedAgentGrid: React.FC<VirtualizedAgentGridProps> = ({
   // Simple loading spinner
   const loadingSpinner = (
     <div className="flex justify-center py-12">
-      <Spinner className="h-8 w-8 text-primary" />
+      <Spinner className="h-8 w-8 text-text-primary" />
     </div>
   );
 
diff --git a/client/src/components/Agents/tests/AgentGrid.integration.spec.tsx b/client/src/components/Agents/tests/AgentGrid.integration.spec.tsx
index 87a96acb87..f320dd6e64 100644
--- a/client/src/components/Agents/tests/AgentGrid.integration.spec.tsx
+++ b/client/src/components/Agents/tests/AgentGrid.integration.spec.tsx
@@ -359,7 +359,7 @@ describe('AgentGrid Integration with useGetMarketplaceAgentsQuery', () => {
       );
 
       // Should show loading spinner
-      const spinner = document.querySelector('.text-primary');
+      const spinner = document.querySelector('.text-text-primary');
       expect(spinner).toBeInTheDocument();
     });
 
diff --git a/client/src/components/Agents/tests/VirtualizedAgentGrid.test.tsx b/client/src/components/Agents/tests/VirtualizedAgentGrid.test.tsx
index 2aed774e81..b756fb9add 100644
--- a/client/src/components/Agents/tests/VirtualizedAgentGrid.test.tsx
+++ b/client/src/components/Agents/tests/VirtualizedAgentGrid.test.tsx
@@ -263,7 +263,7 @@ describe('VirtualizedAgentGrid', () => {
     // Should show loading spinner
     const spinner = document.querySelector('.spinner');
     expect(spinner).toBeInTheDocument();
-    expect(spinner).toHaveClass('h-8 w-8 text-primary');
+    expect(spinner).toHaveClass('h-8 w-8 text-text-primary');
   });
 
   it('has proper accessibility attributes', () => {
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index c02ee15e1a..41e9e79f93 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -236,7 +236,7 @@ const ChatForm = memo(function ChatForm({
   const baseClasses = useMemo(
     () =>
       cn(
-        'md:py-3.5 m-0 w-full resize-none py-[13px] placeholder-black/60 bg-transparent dark:placeholder-white/60 [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]',
+        'md:py-3.5 m-0 w-full resize-none py-[13px] placeholder:text-text-tertiary bg-transparent [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]',
         isCollapsed ? 'max-h-[52px]' : 'max-h-[45vh] md:max-h-[55vh]',
         isMoreThanThreeRows ? 'pl-5' : 'px-5',
       ),
diff --git a/client/src/components/Chat/Input/Files/FileUpload.tsx b/client/src/components/Chat/Input/Files/FileUpload.tsx
index ce2fcc4f08..9937319700 100644
--- a/client/src/components/Chat/Input/Files/FileUpload.tsx
+++ b/client/src/components/Chat/Input/Files/FileUpload.tsx
@@ -75,7 +75,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
         type="button"
         onClick={handleClick}
         className={cn(
-          'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal text-text-secondary transition-colors hover:bg-surface-hover hover:text-status-success focus:ring-ring',
+          'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal text-text-secondary transition-colors hover:bg-surface-hover hover:text-status-success focus:ring-text-primary',
           statusColor,
           containerClassName,
         )}
diff --git a/client/src/components/Chat/Input/Files/ImagePreview.tsx b/client/src/components/Chat/Input/Files/ImagePreview.tsx
index 2714c3677f..c628213e23 100644
--- a/client/src/components/Chat/Input/Files/ImagePreview.tsx
+++ b/client/src/components/Chat/Input/Files/ImagePreview.tsx
@@ -115,7 +115,7 @@ const ImagePreview = ({
         type="button"
         className={cn(
           'relative size-14 overflow-hidden rounded-xl transition-shadow',
-          'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary',
           className,
         )}
         style={style}
diff --git a/client/src/components/Chat/Input/Files/MyFilesModal.tsx b/client/src/components/Chat/Input/Files/MyFilesModal.tsx
index 098b738b33..eda88b67d6 100644
--- a/client/src/components/Chat/Input/Files/MyFilesModal.tsx
+++ b/client/src/components/Chat/Input/Files/MyFilesModal.tsx
@@ -29,7 +29,7 @@ export function MyFilesModal({
     <OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
       <OGDialogContent
         title={localize('com_nav_my_files')}
-        className="w-11/12 bg-background text-text-primary shadow-2xl"
+        className="w-11/12 bg-surface-primary text-text-primary shadow-2xl"
       >
         <OGDialogHeader>
           <OGDialogTitle>{localize('com_nav_my_files')}</OGDialogTitle>
diff --git a/client/src/components/Chat/Input/Files/ProgressCircle.tsx b/client/src/components/Chat/Input/Files/ProgressCircle.tsx
index de7d4a6db8..934bf06fbc 100644
--- a/client/src/components/Chat/Input/Files/ProgressCircle.tsx
+++ b/client/src/components/Chat/Input/Files/ProgressCircle.tsx
@@ -11,7 +11,7 @@ export default function ProgressCircle({
     <div className="absolute inset-0 flex items-center justify-center bg-black/5 text-white">
       <svg width="120" height="120" viewBox="0 0 120 120" className="h-6 w-6">
         <circle
-          className="origin-[50%_50%] -rotate-90 stroke-gray-400"
+          className="origin-[50%_50%] -rotate-90 stroke-border-heavy"
           strokeWidth="10"
           fill="transparent"
           r="55"
diff --git a/client/src/components/Chat/Input/Files/Table/ColumnVisibilityDropdown.tsx b/client/src/components/Chat/Input/Files/Table/ColumnVisibilityDropdown.tsx
index 8401db6d38..5890c86d2c 100644
--- a/client/src/components/Chat/Input/Files/Table/ColumnVisibilityDropdown.tsx
+++ b/client/src/components/Chat/Input/Files/Table/ColumnVisibilityDropdown.tsx
@@ -44,7 +44,7 @@ export function ColumnVisibilityDropdown<TData>({
         <Menu.MenuButton
           aria-label={localize('com_files_filter_by')}
           className={cn(
-            'inline-flex h-9 items-center justify-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+            'inline-flex h-9 items-center justify-center gap-2 rounded-md border border-border-medium bg-transparent px-3 text-sm font-medium ring-offset-surface-primary transition-colors hover:bg-surface-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
             isSmallScreen && 'px-2 py-1',
           )}
         >
diff --git a/client/src/components/Chat/Input/Files/Table/DataTable.tsx b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
index d09dbca6b7..4a24ee400c 100644
--- a/client/src/components/Chat/Input/Files/Table/DataTable.tsx
+++ b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
@@ -129,7 +129,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           />
         </div>
       </div>
-      <div className="relative grid h-full max-h-[calc(100vh-20rem)] min-h-[calc(100vh-20rem)] w-full flex-1 overflow-hidden overflow-x-auto overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
+      <div className="relative grid h-full max-h-[calc(100vh-20rem)] min-h-[calc(100vh-20rem)] w-full flex-1 overflow-hidden overflow-x-auto overflow-y-auto rounded-md border border-border-light">
         <Table className="w-full min-w-[300px] border-separate border-spacing-0">
           <TableHeader className="sticky top-0 z-50">
             {table.getHeaderGroups().map((headerGroup) => (
@@ -196,7 +196,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
       </div>
 
       <div className="flex items-center justify-end gap-2 py-4">
-        <div className="ml-2 flex-1 truncate text-xs text-muted-foreground sm:ml-4 sm:text-sm">
+        <div className="ml-2 flex-1 truncate text-xs text-text-secondary sm:ml-4 sm:text-sm">
           <span className="hidden sm:inline">
             {localize('com_files_number_selected', {
               0: `${table.getFilteredSelectedRowModel().rows.length}`,
diff --git a/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx b/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx
index 6a476027e1..11666b25f1 100644
--- a/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx
+++ b/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx
@@ -105,7 +105,7 @@ export function SortFilterHeader<TData, TValue>({
                 aria-pressed={column.getIsFiltered() ? 'true' : 'false'}
                 aria-current={sortState ? 'true' : 'false'}
                 className={cn(
-                  'inline-flex items-center gap-2 rounded-lg px-2 py-0 text-xs transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[open]:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm',
+                  'inline-flex items-center gap-2 rounded-lg px-2 py-0 text-xs transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary data-[open]:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm',
                   column.getIsFiltered() && 'border-b-2 border-b-border-xheavy',
                 )}
               >
diff --git a/client/src/components/Chat/Input/MCPConfigDialog.tsx b/client/src/components/Chat/Input/MCPConfigDialog.tsx
index f5ffc9c08e..fe3cf4c6b4 100644
--- a/client/src/components/Chat/Input/MCPConfigDialog.tsx
+++ b/client/src/components/Chat/Input/MCPConfigDialog.tsx
@@ -87,7 +87,7 @@ export default function MCPConfigDialog({
                   render={({ field }) => {
                     const placeholder = localize('com_ui_mcp_enter_var', { 0: details.title });
                     const className =
-                      'w-full rounded-md border-border-medium shadow-sm focus:border-border-heavy focus:ring-ring-primary dark:bg-surface-tertiary dark:text-text-primary sm:text-sm';
+                      'w-full rounded-md border-border-medium shadow-sm focus:border-border-heavy focus:ring-ring-primary sm:text-sm';
                     if (details.sensitive === false) {
                       return (
                         <Input
diff --git a/client/src/components/Chat/Input/TokenUsage/index.tsx b/client/src/components/Chat/Input/TokenUsage/index.tsx
index ff969148d5..3edb02c27c 100644
--- a/client/src/components/Chat/Input/TokenUsage/index.tsx
+++ b/client/src/components/Chat/Input/TokenUsage/index.tsx
@@ -73,7 +73,7 @@ function TokenUsageIndicator({
             aria-haspopup="dialog"
             className={cn(
               'flex size-9 items-center justify-center rounded-full p-1 transition-colors',
-              'hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
               'duration-300 animate-in fade-in zoom-in-95',
             )}
           >
diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
index a9788a3292..d8d363f0ed 100644
--- a/client/src/components/Chat/Landing.tsx
+++ b/client/src/components/Chat/Landing.tsx
@@ -16,7 +16,7 @@ import ConvoIcon from '~/components/Endpoints/ConvoIcon';
 import { useLocalize, useAuthContext } from '~/hooks';
 
 const containerClassName =
-  'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-surface-primary dark:bg-presentation text-text-primary dark:after:shadow-none ';
+  'shadow-stroke relative flex h-full items-center justify-center rounded-full bg-presentation text-text-primary dark:after:shadow-none ';
 
 function getTextSizeClass(text: string | undefined | null) {
   if (!text) {
diff --git a/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx b/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx
index aba4edce07..95e3a184b1 100644
--- a/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx
@@ -126,10 +126,7 @@ export const CustomMenuSeparator = React.forwardRef<HTMLHRElement, Ariakit.MenuS
       <Ariakit.MenuSeparator
         ref={ref}
         {...props}
-        className={cn(
-          'my-0.5 h-0 w-full border-t border-border-light',
-          props.className,
-        )}
+        className={cn('my-0.5 h-0 w-full border-t border-border-light', props.className)}
       />
     );
   },
@@ -170,7 +167,7 @@ export const CustomMenuItem = React.forwardRef<HTMLDivElement, CustomMenuItemPro
       blurOnHoverEnd: false,
       ...props,
       className: cn(
-        'relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1 outline-none! scroll-m-1 scroll-mt-[calc(var(--combobox-height,0px)+var(--label-height,4px))] aria-disabled:opacity-25 data-[active-item]:bg-black/[0.075] data-[active-item]:text-text-primary dark:data-[active-item]:bg-white/10 sm:text-sm min-w-0 w-full before:absolute before:left-0 before:top-1 before:bottom-1 before:w-0.5 before:bg-transparent before:rounded-full data-[active-item]:before:bg-text-primary',
+        'relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1 outline-none! scroll-m-1 scroll-mt-[calc(var(--combobox-height,0px)+var(--label-height,4px))] aria-disabled:opacity-25 data-[active-item]:bg-surface-active data-[active-item]:text-text-primary sm:text-sm min-w-0 w-full before:absolute before:left-0 before:top-1 before:bottom-1 before:w-0.5 before:bg-transparent before:rounded-full data-[active-item]:before:bg-text-primary',
         props.className,
       ),
     };
diff --git a/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx b/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
index b8903bab75..1e72be40ff 100644
--- a/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
+++ b/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
@@ -132,7 +132,7 @@ const EditPresetDialog = ({
 
   return (
     <OGDialog open={presetModalVisible} onOpenChange={handleOpenChange} triggerRef={triggerRef}>
-      <OGDialogContent className="h-[100dvh] max-h-[100dvh] w-full max-w-full overflow-y-auto bg-surface-dialog dark:border-border-light dark:text-text-secondary md:h-auto md:max-h-[90vh] md:max-w-[75vw] md:rounded-lg lg:max-w-[950px]">
+      <OGDialogContent className="h-[100dvh] max-h-[100dvh] w-full max-w-full overflow-y-auto bg-surface-dialog md:h-auto md:max-h-[90vh] md:max-w-[75vw] md:rounded-lg lg:max-w-[950px]">
         <OGDialogTitle>
           {localize('com_ui_edit_preset_title', { title: preset?.title })}
         </OGDialogTitle>
diff --git a/client/src/components/Chat/Menus/Presets/PresetItems.tsx b/client/src/components/Chat/Menus/Presets/PresetItems.tsx
index cd359661e5..24102db776 100644
--- a/client/src/components/Chat/Menus/Presets/PresetItems.tsx
+++ b/client/src/components/Chat/Menus/Presets/PresetItems.tsx
@@ -63,7 +63,7 @@ const PresetItems: FC<{
             <DialogTrigger asChild>
               <button
                 type="button"
-                className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-destructive focus:ring-ring"
+                className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-destructive focus:ring-text-primary"
                 aria-label={localize('com_ui_clear_all')}
               >
                 <svg
@@ -152,7 +152,7 @@ const PresetItems: FC<{
                           <Icon
                             context="menu-item"
                             iconURL={getEndpointField(endpointsConfig, preset.endpoint, 'iconURL')}
-                            className="icon-md mr-1 dark:text-text-primary"
+                            className="icon-md mr-1"
                             endpoint={preset.endpoint}
                           />
                         )
diff --git a/client/src/components/Chat/Messages/Content/Image.tsx b/client/src/components/Chat/Messages/Content/Image.tsx
index 070d379c7c..4289a5561a 100644
--- a/client/src/components/Chat/Messages/Content/Image.tsx
+++ b/client/src/components/Chat/Messages/Content/Image.tsx
@@ -114,7 +114,7 @@ const Image = ({
         onClick={() => setIsOpen(true)}
         className={cn(
           'relative mt-1 w-full max-w-lg cursor-pointer overflow-hidden rounded-lg border border-border-light text-text-secondary-alt shadow-md transition-shadow',
-          'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary',
           className,
         )}
         style={heightStyle}
diff --git a/client/src/components/Chat/Messages/Content/MessageContent.tsx b/client/src/components/Chat/Messages/Content/MessageContent.tsx
index c2fe761577..e57b79a383 100644
--- a/client/src/components/Chat/Messages/Content/MessageContent.tsx
+++ b/client/src/components/Chat/Messages/Content/MessageContent.tsx
@@ -28,7 +28,7 @@ const parseThinkingContent = (text: string) => {
 
 const LoadingFallback = () => (
   <div className="text-message mb-[0.625rem] flex min-h-[20px] flex-col items-start gap-3 overflow-visible">
-    <div className="markdown prose dark:prose-invert light w-full break-words dark:text-text-primary">
+    <div className="markdown prose dark:prose-invert light w-full break-words">
       <div className="absolute">
         <p className="submitting relative">
           <span className="result-thinking" />
diff --git a/client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx b/client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx
index a5be5dae22..6f51951f9b 100644
--- a/client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/EmptyText.tsx
@@ -4,7 +4,7 @@ import { memo } from 'react';
 const EmptyTextPart = memo(() => {
   return (
     <div className="text-message flex min-h-[20px] flex-col items-start gap-3 overflow-visible">
-      <div className="markdown prose dark:prose-invert light w-full break-words dark:text-text-primary">
+      <div className="markdown prose dark:prose-invert light w-full break-words">
         <div className="absolute">
           <p className="submitting relative">
             <span className="result-thinking" />
diff --git a/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx b/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
index 7925cd5086..b38fc58178 100644
--- a/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx
@@ -466,7 +466,7 @@ export default function SubagentCall({
           <div
             className={cn(
               'flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-full',
-              running && !subagentAgent && 'animate-pulse text-primary',
+              running && !subagentAgent && 'animate-pulse text-text-primary',
             )}
             aria-hidden="true"
           >
@@ -641,7 +641,7 @@ function SubagentPrompt({
           aria-expanded={expanded}
           aria-label={toggleLabel}
           title={toggleLabel}
-          className="inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-text-secondary transition hover:bg-surface-tertiary hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-ring"
+          className="inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-text-secondary transition hover:bg-surface-tertiary hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-text-primary"
         >
           {expanded ? (
             <Minimize2 size={14} aria-hidden="true" />
diff --git a/client/src/components/Chat/Messages/Content/Parts/Summary.tsx b/client/src/components/Chat/Messages/Content/Parts/Summary.tsx
index 77973f0c06..b716204fa7 100644
--- a/client/src/components/Chat/Messages/Content/Parts/Summary.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Summary.tsx
@@ -113,7 +113,7 @@ const SummaryButton = memo(
                 ? 'opacity-0 group-focus-within/summary-container:opacity-100 group-hover/summary-container:opacity-100'
                 : 'opacity-0',
               'hover:bg-surface-hover hover:text-text-primary',
-              'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',
+              'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
             )}
           >
             <span className="sr-only">
diff --git a/client/src/components/Chat/Messages/Content/Parts/Thinking.tsx b/client/src/components/Chat/Messages/Content/Parts/Thinking.tsx
index 39240af3d0..c103dc39de 100644
--- a/client/src/components/Chat/Messages/Content/Parts/Thinking.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Thinking.tsx
@@ -104,7 +104,7 @@ export const ThinkingButton = memo(
                 ? 'opacity-0 group-focus-within/thinking-container:opacity-100 group-hover/thinking-container:opacity-100'
                 : 'opacity-0',
               'hover:bg-surface-hover hover:text-text-primary',
-              'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',
+              'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
             )}
           >
             <span className="sr-only">
diff --git a/client/src/components/Chat/Messages/Content/SearchContent.tsx b/client/src/components/Chat/Messages/Content/SearchContent.tsx
index 325aae89c8..3d18524d18 100644
--- a/client/src/components/Chat/Messages/Content/SearchContent.tsx
+++ b/client/src/components/Chat/Messages/Content/SearchContent.tsx
@@ -70,7 +70,7 @@ const SearchContent = ({
       className={cn(
         'markdown prose dark:prose-invert light w-full break-words',
         message.isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
-        message.isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-70',
+        message.isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-100',
       )}
       dir="auto"
     >
diff --git a/client/src/components/Chat/Messages/Content/ToolCallGroup.tsx b/client/src/components/Chat/Messages/Content/ToolCallGroup.tsx
index 52b166b110..cb074644ca 100644
--- a/client/src/components/Chat/Messages/Content/ToolCallGroup.tsx
+++ b/client/src/components/Chat/Messages/Content/ToolCallGroup.tsx
@@ -254,7 +254,7 @@ export default function ToolCallGroup({
           <div
             className={cn(
               'flex h-5 w-5 shrink-0 items-center justify-center text-text-secondary',
-              !allCompleted && isSubmitting && 'animate-pulse text-primary',
+              !allCompleted && isSubmitting && 'animate-pulse text-text-primary',
             )}
             aria-hidden="true"
           >
diff --git a/client/src/components/Chat/Messages/Content/UIResourceCarousel.tsx b/client/src/components/Chat/Messages/Content/UIResourceCarousel.tsx
index 4cafa643c6..117bb9d2cc 100644
--- a/client/src/components/Chat/Messages/Content/UIResourceCarousel.tsx
+++ b/client/src/components/Chat/Messages/Content/UIResourceCarousel.tsx
@@ -73,7 +73,7 @@ const UIResourceCarousel: React.FC<UIResourceCarouselProps> = React.memo(({ uiRe
         <button
           type="button"
           onClick={() => scroll('left')}
-          className={`absolute left-2 top-1/2 z-20 -translate-y-1/2 rounded-xl bg-white p-2 text-gray-800 shadow-lg transition-all duration-200 hover:scale-110 hover:bg-gray-100 hover:shadow-xl active:scale-95 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300 ${
+          className={`absolute left-2 top-1/2 z-20 -translate-y-1/2 rounded-xl bg-surface-fixed p-2 text-text-fixed shadow-lg transition-all duration-200 hover:scale-110 hover:bg-surface-fixed-hover hover:shadow-xl active:scale-95 ${
             isContainerHovered ? 'opacity-100' : 'pointer-events-none opacity-0'
           }`}
           aria-label="Scroll left"
@@ -125,7 +125,7 @@ const UIResourceCarousel: React.FC<UIResourceCarouselProps> = React.memo(({ uiRe
         <button
           type="button"
           onClick={() => scroll('right')}
-          className={`absolute right-2 top-1/2 z-20 -translate-y-1/2 rounded-xl bg-white p-2 text-gray-800 shadow-lg transition-all duration-200 hover:scale-110 hover:bg-gray-100 hover:shadow-xl active:scale-95 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300 ${
+          className={`absolute right-2 top-1/2 z-20 -translate-y-1/2 rounded-xl bg-surface-fixed p-2 text-text-fixed shadow-lg transition-all duration-200 hover:scale-110 hover:bg-surface-fixed-hover hover:shadow-xl active:scale-95 ${
             isContainerHovered ? 'opacity-100' : 'pointer-events-none opacity-0'
           }`}
           aria-label="Scroll right"
diff --git a/client/src/components/Chat/Messages/Feedback.tsx b/client/src/components/Chat/Messages/Feedback.tsx
index 9bc10c1927..1dfa2478a3 100644
--- a/client/src/components/Chat/Messages/Feedback.tsx
+++ b/client/src/components/Chat/Messages/Feedback.tsx
@@ -221,7 +221,7 @@ function buttonClasses(isActive: boolean, isLast: boolean) {
     'group-hover:visible group-focus-within:visible group-[.final-completion]:visible',
     !isLast &&
       'group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:hover)]:opacity-0',
-    'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
+    'focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:outline-none',
     isActive && 'active text-text-primary bg-surface-hover',
   );
 }
diff --git a/client/src/components/Chat/Messages/Fork.tsx b/client/src/components/Chat/Messages/Fork.tsx
index 1c4e79d4b5..71e61239aa 100644
--- a/client/src/components/Chat/Messages/Fork.tsx
+++ b/client/src/components/Chat/Messages/Fork.tsx
@@ -98,7 +98,7 @@ const PopoverButton: React.FC<PopoverButtonProps> = ({
             </Ariakit.Button>
           }
         />
-        <Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
+        <Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-text-primary">
           <VisuallyHidden>
             {localize('com_ui_fork_more_details_about', { 0: label })}
           </VisuallyHidden>
@@ -166,7 +166,7 @@ const CheckboxOption: React.FC<CheckboxOptionProps> = ({
                   }
                   onToggle(value);
                 }}
-                className="h-4 w-4 rounded-sm border border-primary ring-offset-background transition duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+                className="h-4 w-4 rounded-sm border border-border-xheavy ring-offset-surface-primary transition duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-surface-inverted data-[state=checked]:text-text-inverted"
                 aria-label={localize(labelKey)}
               />
               <label
@@ -178,7 +178,7 @@ const CheckboxOption: React.FC<CheckboxOptionProps> = ({
             </div>
           }
         />
-        <Ariakit.HovercardDisclosure className="ml-1 rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
+        <Ariakit.HovercardDisclosure className="ml-1 rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-text-primary">
           <VisuallyHidden>{localize(infoKey)}</VisuallyHidden>
           {chevronDown}
         </Ariakit.HovercardDisclosure>
@@ -232,7 +232,7 @@ export default function Fork({
     'group-hover:visible group-focus-within:visible group-[.final-completion]:visible',
     !isLast &&
       'group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:hover)]:opacity-0',
-    'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
+    'focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:outline-none',
     isActive && 'active text-text-primary bg-surface-hover',
   );
 
@@ -381,7 +381,7 @@ export default function Fork({
                   </button>
                 }
               />
-              <Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-ring">
+              <Ariakit.HovercardDisclosure className="rounded-full text-text-secondary focus:outline-none focus:ring-2 focus:ring-text-primary">
                 <VisuallyHidden>{localize('com_ui_fork_more_info_options')}</VisuallyHidden>
                 {chevronDown}
               </Ariakit.HovercardDisclosure>
diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx
index f1d41fa6d6..13672dbb47 100644
--- a/client/src/components/Chat/Messages/HoverButtons.tsx
+++ b/client/src/components/Chat/Messages/HoverButtons.tsx
@@ -90,7 +90,7 @@ const HoverButton = memo(
       !isLast &&
         'group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:hover)]:opacity-0',
       !isVisible && 'opacity-0',
-      'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
+      'focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:outline-none',
       isActive && isVisible && 'active text-text-primary bg-surface-hover',
       className,
     );
diff --git a/client/src/components/Chat/Messages/Message.tsx b/client/src/components/Chat/Messages/Message.tsx
index fc2a79fca0..0f923841fb 100644
--- a/client/src/components/Chat/Messages/Message.tsx
+++ b/client/src/components/Chat/Messages/Message.tsx
@@ -13,7 +13,7 @@ const MessageContainer = React.memo(function MessageContainer({
 }) {
   return (
     <div
-      className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent"
+      className="text-token-text-primary w-full border-0 bg-transparent"
       onWheel={handleScroll}
       onTouchMove={handleScroll}
     >
diff --git a/client/src/components/Chat/Messages/MessageNav.tsx b/client/src/components/Chat/Messages/MessageNav.tsx
index 92d11f6e6c..966831cd67 100644
--- a/client/src/components/Chat/Messages/MessageNav.tsx
+++ b/client/src/components/Chat/Messages/MessageNav.tsx
@@ -836,8 +836,8 @@ function MessageNav({ scrollableRef }: { scrollableRef: React.RefObject<HTMLDivE
         'group/nav absolute right-2 top-1/2 z-40 hidden max-h-[min(24rem,calc(100%-2rem))]',
         '-translate-y-1/2 flex-col items-center gap-1.5 rounded-full px-1 py-2 md:flex',
         'opacity-30 transition-opacity duration-300',
-        'hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/5',
-        'focus-within:bg-black/5 focus-within:opacity-100 dark:focus-within:bg-white/5',
+        'hover:bg-surface-hover hover:opacity-100',
+        'focus-within:bg-surface-hover focus-within:opacity-100',
       )}
     >
       <button
diff --git a/client/src/components/Chat/Messages/MessageParts.tsx b/client/src/components/Chat/Messages/MessageParts.tsx
index c4b5930214..7639420c18 100644
--- a/client/src/components/Chat/Messages/MessageParts.tsx
+++ b/client/src/components/Chat/Messages/MessageParts.tsx
@@ -100,7 +100,7 @@ export default function Message(props: TMessageProps) {
   return (
     <>
       <div
-        className="w-full border-0 bg-transparent dark:border-0 dark:bg-transparent"
+        className="w-full border-0 bg-transparent"
         onWheel={handleScroll}
         onTouchMove={handleScroll}
       >
diff --git a/client/src/components/Chat/Messages/MessagesView.tsx b/client/src/components/Chat/Messages/MessagesView.tsx
index 0e2166b028..b609b1aa8b 100644
--- a/client/src/components/Chat/Messages/MessagesView.tsx
+++ b/client/src/components/Chat/Messages/MessagesView.tsx
@@ -50,7 +50,7 @@ function MessagesViewContent({
               width: '100%',
             }}
           >
-            <div ref={contentRef} className="flex flex-col pb-9 pt-14 dark:bg-transparent">
+            <div ref={contentRef} className="flex flex-col pb-9 pt-14">
               {(_messagesTree && _messagesTree.length == 0) || _messagesTree === null ? (
                 <div
                   className={cn(
diff --git a/client/src/components/Chat/Messages/MinimalHoverButtons.tsx b/client/src/components/Chat/Messages/MinimalHoverButtons.tsx
index 816da2575e..b3cd461f17 100644
--- a/client/src/components/Chat/Messages/MinimalHoverButtons.tsx
+++ b/client/src/components/Chat/Messages/MinimalHoverButtons.tsx
@@ -20,7 +20,7 @@ export default function MinimalHoverButtons({ message, searchResults }: THoverBu
   return (
     <div className="visible mt-1 flex justify-center gap-1 self-end text-text-tertiary lg:justify-start">
       <button
-        className="ml-0 flex items-center gap-1.5 rounded-lg p-1.5 text-xs text-text-secondary-alt transition-colors duration-200 hover:bg-surface-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black group-focus-within:opacity-100 group-hover:opacity-100 dark:focus-visible:ring-white [@media(hover:hover)]:opacity-0"
+        className="ml-0 flex items-center gap-1.5 rounded-lg p-1.5 text-xs text-text-secondary-alt transition-colors duration-200 hover:bg-surface-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:hover)]:opacity-0"
         onClick={() => copyToClipboard(setIsCopied)}
         type="button"
         title={
diff --git a/client/src/components/Chat/Messages/MinimalMessages.tsx b/client/src/components/Chat/Messages/MinimalMessages.tsx
index a8ba54d807..14311c8421 100644
--- a/client/src/components/Chat/Messages/MinimalMessages.tsx
+++ b/client/src/components/Chat/Messages/MinimalMessages.tsx
@@ -25,7 +25,7 @@ const MinimalMessages = React.forwardRef(
                     width: '100%',
                   }}
                 >
-                  <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
+                  <div className="flex flex-col pb-9 text-sm">
                     {props.children}
                     <div className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50" />
                   </div>
diff --git a/client/src/components/Chat/Messages/SiblingSwitch.tsx b/client/src/components/Chat/Messages/SiblingSwitch.tsx
index 74af2c6bda..239fcedddc 100644
--- a/client/src/components/Chat/Messages/SiblingSwitch.tsx
+++ b/client/src/components/Chat/Messages/SiblingSwitch.tsx
@@ -27,7 +27,7 @@ export default function SiblingSwitch({
     'hover-button rounded-lg p-1.5 text-text-secondary-alt',
     'hover:text-text-primary hover:bg-surface-hover',
     'group-hover:visible group-focus-within:visible group-[.final-completion]:visible',
-    'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
+    'focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:outline-none',
   );
 
   return siblingCount > 1 ? (
diff --git a/client/src/components/Conversations/RenameForm.tsx b/client/src/components/Conversations/RenameForm.tsx
index 641b2a6484..fbe6384953 100644
--- a/client/src/components/Conversations/RenameForm.tsx
+++ b/client/src/components/Conversations/RenameForm.tsx
@@ -58,7 +58,7 @@ const RenameForm: React.FC<RenameFormProps> = ({
       <div className="flex gap-1" role="toolbar">
         <button
           onClick={() => onCancel()}
-          className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
+          className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-text-primary"
           aria-label={localize('com_ui_cancel')}
           type="button"
         >
@@ -66,7 +66,7 @@ const RenameForm: React.FC<RenameFormProps> = ({
         </button>
         <button
           onClick={() => onSubmit(titleInput)}
-          className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
+          className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-text-primary"
           aria-label={localize('com_ui_save')}
           type="button"
         >
diff --git a/client/src/components/Endpoints/Settings/Examples.tsx b/client/src/components/Endpoints/Settings/Examples.tsx
index 69a0134120..1e32ff2f30 100644
--- a/client/src/components/Endpoints/Settings/Examples.tsx
+++ b/client/src/components/Endpoints/Settings/Examples.tsx
@@ -78,14 +78,14 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
       <div className="flex justify-center">
         <Button
           type="button"
-          className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-text-primary hover:bg-surface-hover hover:text-text-primary focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:focus:outline-none dark:focus:ring-offset-0"
+          className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-text-primary hover:bg-surface-hover hover:text-text-primary focus:ring-0 focus:ring-offset-0 dark:focus:outline-none dark:focus:ring-offset-0"
           onClick={removeExample}
         >
           <Minus className="w-[16px]" aria-hidden="true" />
         </Button>
         <Button
           type="button"
-          className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-text-primary hover:bg-surface-hover hover:text-text-primary focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:focus:outline-none dark:focus:ring-offset-0"
+          className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-text-primary hover:bg-surface-hover hover:text-text-primary focus:ring-0 focus:ring-offset-0 dark:focus:outline-none dark:focus:ring-offset-0"
           onClick={addExample}
         >
           <Plus className="w-[16px]" aria-hidden="true" />
diff --git a/client/src/components/Files/ActionButton.tsx b/client/src/components/Files/ActionButton.tsx
index 9bb096c683..9537c238a9 100644
--- a/client/src/components/Files/ActionButton.tsx
+++ b/client/src/components/Files/ActionButton.tsx
@@ -11,7 +11,7 @@ export default function ActionButton({ onClick }: ActionButtonProps) {
   return (
     <div className="w-32">
       <Button
-        className="w-full rounded-md border border-text-primary bg-surface-primary p-0 text-text-primary hover:bg-primary hover:text-primary-foreground"
+        className="w-full rounded-md border border-text-primary bg-surface-primary p-0 text-text-primary hover:bg-surface-inverted hover:text-text-inverted"
         onClick={onClick}
       >
         {/* Action Button */}
diff --git a/client/src/components/Files/FileList/DataTableFile.tsx b/client/src/components/Files/FileList/DataTableFile.tsx
index f62d673208..918a8015f1 100644
--- a/client/src/components/Files/FileList/DataTableFile.tsx
+++ b/client/src/components/Files/FileList/DataTableFile.tsx
@@ -111,7 +111,7 @@ export default function DataTableFile<TData, TValue>({
                 deleteFiles({ files: filesToDelete as TFile[], setFiles });
                 setRowSelection({});
               }}
-              className="ml-1 gap-2 dark:hover:bg-gray-850/25 sm:ml-0"
+              className="ml-1 gap-2 hover:bg-surface-hover sm:ml-0"
               disabled={!table.getFilteredSelectedRowModel().rows.length || isDeleting}
             >
               {isDeleting ? (
@@ -161,7 +161,7 @@ export default function DataTableFile<TData, TValue>({
           </div>
         </div>
       </div>
-      <div className="relative mt-3 max-h-[25rem] min-h-0 overflow-y-auto rounded-md border border-black/10 pb-4 dark:border-white/10 sm:min-h-[28rem]">
+      <div className="relative mt-3 max-h-[25rem] min-h-0 overflow-y-auto rounded-md border border-border-light pb-4 sm:min-h-[28rem]">
         <Table className="w-full min-w-[600px] border-separate border-spacing-0">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -192,7 +192,7 @@ export default function DataTableFile<TData, TValue>({
                   return (
                     <TableHead
                       key={header.id}
-                      className="align-start sticky top-0 rounded-t border-b border-black/10 bg-surface-secondary px-2 py-1 text-left font-medium text-text-secondary dark:border-white/10 sm:px-4 sm:py-2"
+                      className="align-start sticky top-0 rounded-t border-b border-border-light bg-surface-secondary px-2 py-1 text-left font-medium text-text-secondary sm:px-4 sm:py-2"
                       style={style}
                     >
                       {header.isPlaceholder
@@ -210,7 +210,7 @@ export default function DataTableFile<TData, TValue>({
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && 'selected'}
-                  className="border-b border-black/10 text-left text-text-secondary dark:border-white/10 [tr:last-child_&]:border-b-0"
+                  className="border-b border-border-light text-left text-text-secondary [tr:last-child_&]:border-b-0"
                 >
                   {row.getVisibleCells().map((cell, index) => {
                     const maxWidth =
@@ -247,7 +247,7 @@ export default function DataTableFile<TData, TValue>({
         </Table>
       </div>
       <div className="ml-4 mr-4 mt-4 flex h-auto items-center justify-end space-x-2 py-4 sm:ml-0 sm:mr-0 sm:h-0">
-        <div className="ml-2 flex-1 text-sm text-muted-foreground">
+        <div className="ml-2 flex-1 text-sm text-text-secondary">
           {localize('com_files_number_selected', {
             0: `${table.getFilteredSelectedRowModel().rows.length}`,
             1: `${table.getFilteredRowModel().rows.length}`,
diff --git a/client/src/components/Files/FileList/UploadFileButton.tsx b/client/src/components/Files/FileList/UploadFileButton.tsx
index 0a6f17f8ab..988063efa0 100644
--- a/client/src/components/Files/FileList/UploadFileButton.tsx
+++ b/client/src/components/Files/FileList/UploadFileButton.tsx
@@ -9,7 +9,7 @@ type UploadFileProps = {
 export default function UploadFileButton({ onClick }: UploadFileProps) {
   return (
     <div className="w-full">
-      <Button className="w-full bg-primary px-3 text-primary-foreground" onClick={onClick}>
+      <Button className="w-full bg-surface-inverted px-3 text-text-inverted" onClick={onClick}>
         <PlusIcon className="h-4 w-4 font-bold" />
         &nbsp; <span className="text-nowrap">Upload New File</span>
       </Button>
diff --git a/client/src/components/Files/FileList/UploadFileModal.tsx b/client/src/components/Files/FileList/UploadFileModal.tsx
index d8ffb3b5de..924eef38a8 100644
--- a/client/src/components/Files/FileList/UploadFileModal.tsx
+++ b/client/src/components/Files/FileList/UploadFileModal.tsx
@@ -63,7 +63,7 @@ const UploadFileModal = ({ open, onOpenChange }) => {
             </div>
             <div className="flex w-full flex-row justify-evenly sm:w-1/3">
               <Button
-                className="mr-3 w-full rounded-md border border-black bg-white p-0 text-black hover:bg-white"
+                className="mr-3 w-full rounded-md border border-border-medium bg-surface-secondary p-0 text-text-primary hover:bg-surface-hover"
                 onClick={() => {
                   onOpenChange(false);
                 }}
@@ -71,7 +71,7 @@ const UploadFileModal = ({ open, onOpenChange }) => {
                 Cancel
               </Button>
               <Button
-                className="w-full rounded-md border border-black bg-black p-0 text-white"
+                className="w-full rounded-md border border-border-xheavy bg-surface-inverted p-0 text-text-inverted"
                 onClick={() => {
                   console.log('upload file');
                 }}
diff --git a/client/src/components/Files/VectorStore/VectorStoreButton.tsx b/client/src/components/Files/VectorStore/VectorStoreButton.tsx
index 37225c10b5..a78c3f42e9 100644
--- a/client/src/components/Files/VectorStore/VectorStoreButton.tsx
+++ b/client/src/components/Files/VectorStore/VectorStoreButton.tsx
@@ -9,7 +9,7 @@ type VectorStoreButtonProps = {
 export default function VectorStoreButton({ onClick }: VectorStoreButtonProps) {
   return (
     <div className="w-full">
-      <Button className="w-full bg-primary p-0 text-primary-foreground" onClick={onClick}>
+      <Button className="w-full bg-surface-inverted p-0 text-text-inverted" onClick={onClick}>
         <PlusIcon className="h-4 w-4 font-bold" />
         &nbsp; <span className="text-nowrap">Add Store</span>
       </Button>
diff --git a/client/src/components/Input/Generations/Regenerate.tsx b/client/src/components/Input/Generations/Regenerate.tsx
index 7eff9f0eae..7ba1fe7c53 100644
--- a/client/src/components/Input/Generations/Regenerate.tsx
+++ b/client/src/components/Input/Generations/Regenerate.tsx
@@ -8,7 +8,7 @@ export default function Regenerate({ onClick }: TGenButtonProps) {
 
   return (
     <Button onClick={onClick} shortcutId="regenerateResponse">
-      <RegenerateIcon className="h-3 w-3 flex-shrink-0 text-gray-600/90 dark:text-gray-400" />
+      <RegenerateIcon className="h-3 w-3 flex-shrink-0 text-text-secondary" />
       {localize('com_ui_regenerate')}
     </Button>
   );
diff --git a/client/src/components/Input/Generations/Stop.tsx b/client/src/components/Input/Generations/Stop.tsx
index 44ce392d48..61330c60a0 100644
--- a/client/src/components/Input/Generations/Stop.tsx
+++ b/client/src/components/Input/Generations/Stop.tsx
@@ -8,7 +8,7 @@ export default function Stop({ onClick }: TGenButtonProps) {
 
   return (
     <Button type="stop" onClick={onClick} shortcutId="stopGenerating">
-      <StopGeneratingIcon className="text-gray-600/90 dark:text-gray-400" />
+      <StopGeneratingIcon className="text-text-secondary" />
       {localize('com_ui_stop')}
     </Button>
   );
diff --git a/client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx b/client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx
index c9584a0e94..e13f872fce 100644
--- a/client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx
+++ b/client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx
@@ -81,7 +81,7 @@ function MultiSelectDropDown({
             <>
               <ListboxButton
                 className={cn(
-                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-surface-secondary py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-600 dark:border-white/20 sm:text-sm',
+                  'relative flex w-full cursor-default flex-col rounded-md border border-border-light bg-surface-secondary py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 sm:text-sm',
                   className ?? '',
                 )}
                 id={excludeIds[0]}
@@ -120,12 +120,12 @@ function MultiSelectDropDown({
                               <img
                                 src={v.icon}
                                 alt={`${v} logo`}
-                                className="h-full w-full rounded-sm bg-white"
+                                className="h-full w-full rounded-sm bg-surface-fixed"
                               />
                             ) : (
-                              <Wrench className="h-full w-full rounded-sm bg-white" />
+                              <Wrench className="h-full w-full rounded-sm bg-surface-fixed" />
                             )}
-                            <div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-black/10" />
+                            <div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-border-light" />
                           </div>
                         ))}
                       </div>
@@ -161,7 +161,7 @@ function MultiSelectDropDown({
                 <ListboxOptions
                   ref={menuRef}
                   className={cn(
-                    'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-surface-secondary text-base text-xs ring-1 ring-black/10 focus:outline-none dark:ring-white/20 dark:last:border-0 md:w-[100%]',
+                    'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-surface-secondary text-base text-xs ring-1 ring-border-light focus:outline-none dark:last:border-0 md:w-[100%]',
                     optionsClassName,
                   )}
                 >
@@ -175,7 +175,7 @@ function MultiSelectDropDown({
                       <ListboxOption
                         key={i}
                         value={option[optionValueKey]}
-                        className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-text-primary last:border-0 hover:bg-surface-hover dark:border-white/20"
+                        className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-border-light pl-3 pr-9 text-text-primary last:border-0 hover:bg-surface-hover"
                       >
                         <span className="flex items-center gap-1.5 truncate">
                           {!option.isButton && (
@@ -185,12 +185,12 @@ function MultiSelectDropDown({
                                   <img
                                     src={option.icon}
                                     alt={`${option.name} logo`}
-                                    className="h-full w-full rounded-sm bg-white"
+                                    className="h-full w-full rounded-sm bg-surface-fixed"
                                   />
                                 ) : (
-                                  <Wrench className="h-full w-full rounded-sm bg-white" />
+                                  <Wrench className="h-full w-full rounded-sm bg-surface-fixed" />
                                 )}
-                                <div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-black/10"></div>
+                                <div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-border-light"></div>
                               </div>
                             </span>
                           )}
diff --git a/client/src/components/Input/ModelSelect/MultiSelectPop.tsx b/client/src/components/Input/ModelSelect/MultiSelectPop.tsx
index 6732097bd9..f72c84a45b 100644
--- a/client/src/components/Input/ModelSelect/MultiSelectPop.tsx
+++ b/client/src/components/Input/ModelSelect/MultiSelectPop.tsx
@@ -52,15 +52,13 @@ function MultiSelectPop({
             <button
               data-testid="select-dropdown-button"
               className={cn(
-                'relative flex flex-col rounded-md border border-black/10 bg-surface-secondary py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 sm:text-sm',
+                'relative flex flex-col rounded-md border border-border-light bg-surface-secondary py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 sm:text-sm',
                 'pointer-cursor font-normal',
                 'hover:bg-surface-hover radix-state-open:bg-surface-hover',
               )}
             >
               {' '}
-              {showLabel && (
-                <label className="block text-xs text-text-secondary">{title}</label>
-              )}
+              {showLabel && <label className="block text-xs text-text-secondary">{title}</label>}
               <span className="inline-flex" id={excludeIds[2]}>
                 <span
                   className={cn(
@@ -69,7 +67,7 @@ function MultiSelectPop({
                   )}
                 >
                   {/* {!showLabel && title.length > 0 && (
-                    <span className="text-xs text-gray-700 dark:text-gray-500">{title}:</span>
+                    <span className="text-xs text-text-secondary">{title}:</span>
                   )} */}
                   <span className="flex items-center gap-1">
                     <div className="flex gap-1">
@@ -79,9 +77,9 @@ function MultiSelectPop({
                           {v.icon ? (
                             <img src={v.icon} alt={`${v} logo`} className="icon-lg rounded-sm" />
                           ) : (
-                            <Wrench className="icon-lg rounded-sm bg-white" />
+                            <Wrench className="icon-lg rounded-sm bg-surface-fixed" />
                           )}
-                          <div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-black/10" />
+                          <div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-border-light" />
                         </div>
                       ))}
                     </div>
@@ -137,7 +135,7 @@ function MultiSelectPop({
                           className="icon-sm mr-1 rounded-sm bg-cover"
                         />
                       ) : (
-                        <Wrench className="icon-sm mr-1 rounded-sm bg-white bg-cover dark:bg-gray-800" />
+                        <Wrench className="icon-sm mr-1 rounded-sm bg-surface-secondary bg-cover" />
                       )
                     }
                   />
diff --git a/client/src/components/Input/ModelSelect/SelectDropDownPop.tsx b/client/src/components/Input/ModelSelect/SelectDropDownPop.tsx
index b1de0dd084..1009dde2cf 100644
--- a/client/src/components/Input/ModelSelect/SelectDropDownPop.tsx
+++ b/client/src/components/Input/ModelSelect/SelectDropDownPop.tsx
@@ -68,7 +68,7 @@ function SelectDropDownPop({
             <button
               data-testid="select-dropdown-button"
               className={cn(
-                'pointer-cursor relative flex flex-col rounded-lg border border-black/10 bg-surface-secondary py-2 pl-3 pr-10 text-left focus:ring-0 focus:ring-offset-0 dark:border-gray-700 sm:text-sm',
+                'pointer-cursor relative flex flex-col rounded-lg border border-border-light bg-surface-secondary py-2 pl-3 pr-10 text-left focus:ring-0 focus:ring-offset-0 sm:text-sm',
                 'hover:bg-surface-hover radix-state-open:bg-surface-hover',
                 'min-w-[200px] max-w-[215px] sm:min-w-full sm:max-w-full',
               )}
@@ -76,9 +76,7 @@ function SelectDropDownPop({
               aria-haspopup="false"
             >
               {' '}
-              {showLabel && (
-                <label className="block text-xs text-text-secondary">{title}</label>
-              )}
+              {showLabel && <label className="block text-xs text-text-secondary">{title}</label>}
               <span className="inline-flex w-full">
                 <span
                   className={cn(
diff --git a/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx b/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
index 659b135e54..0cd587ac8a 100644
--- a/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
+++ b/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
@@ -36,7 +36,7 @@ const GoogleConfig = ({ userKey, setUserKey }: Pick<TConfigProps, 'userKey' | 's
       <FileUpload
         id={AuthKeys.GOOGLE_SERVICE_KEY}
         className="w-full"
-        containerClassName="dark:bg-gray-700 h-10 max-h-10 w-full resize-none py-2 dark:ring-1 dark:ring-gray-600"
+        containerClassName="bg-surface-secondary h-10 max-h-10 w-full resize-none py-2"
         text={localize('com_endpoint_config_key_import_json_key')}
         successText={localize('com_endpoint_config_key_import_json_key_success')}
         invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
diff --git a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
index 02e8144ab6..678bb8ac8a 100644
--- a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
+++ b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
@@ -136,7 +136,7 @@ const RevokeKeysButton = ({
               variant="destructive"
               onClick={onClick}
               disabled={isLoading}
-              className="bg-destructive text-white transition-all duration-200 hover:bg-destructive/80"
+              className="bg-surface-destructive text-white transition-all duration-200 hover:bg-surface-destructive-hover"
             >
               {isLoading ? <Spinner /> : localize('com_ui_revoke')}
             </Button>
diff --git a/client/src/components/MCP/MCPServerMenuItem.tsx b/client/src/components/MCP/MCPServerMenuItem.tsx
index 7fcb773bb9..7fc0d1d28d 100644
--- a/client/src/components/MCP/MCPServerMenuItem.tsx
+++ b/client/src/components/MCP/MCPServerMenuItem.tsx
@@ -101,7 +101,7 @@ export default function MCPServerMenuItem({
         className={cn(
           'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm border',
           isSelected
-            ? 'border-primary bg-primary text-primary-foreground'
+            ? 'border-border-xheavy bg-surface-inverted text-text-inverted'
             : 'border-border-xheavy bg-transparent',
         )}
       >
diff --git a/client/src/components/MCP/MCPServerStatusIcon.tsx b/client/src/components/MCP/MCPServerStatusIcon.tsx
index 30b85812c8..6d02050795 100644
--- a/client/src/components/MCP/MCPServerStatusIcon.tsx
+++ b/client/src/components/MCP/MCPServerStatusIcon.tsx
@@ -118,7 +118,9 @@ function CompactStatusDot({ serverStatus, isInitializing }: CompactStatusDotProp
   }
 
   if (!serverStatus) {
-    return <div className="size-3 rounded-full border-2 border-surface-secondary bg-status-neutral" />;
+    return (
+      <div className="size-3 rounded-full border-2 border-surface-secondary bg-status-neutral" />
+    );
   }
 
   const { connectionState, requiresOAuth } = serverStatus;
@@ -145,7 +147,7 @@ function LoadingStatusIcon({ serverName, onCancel, canCancel }: InitializingStat
       <button
         type="button"
         onClick={onCancel}
-        className="group flex size-6 items-center justify-center rounded p-1 hover:bg-red-100 dark:hover:bg-red-900/20"
+        className="group flex size-6 items-center justify-center rounded p-1 hover:bg-status-error-subtle"
         aria-label={localize('com_ui_cancel')}
         title={localize('com_ui_cancel')}
       >
diff --git a/client/src/components/Messages/MessageContent.tsx b/client/src/components/Messages/MessageContent.tsx
index 67865ed397..14d4ce877e 100644
--- a/client/src/components/Messages/MessageContent.tsx
+++ b/client/src/components/Messages/MessageContent.tsx
@@ -14,7 +14,7 @@ const MessageContainer = React.memo(function MessageContainer({
 }) {
   return (
     <div
-      className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent"
+      className="text-token-text-primary w-full border-0 bg-transparent"
       onWheel={handleScroll}
       onTouchMove={handleScroll}
     >
diff --git a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
index 9b6bd28ebe..6ddd5768d1 100644
--- a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
+++ b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
@@ -108,7 +108,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
               aria-pressed={tags.length > 0}
               className={cn(
                 'flex items-center justify-center',
-                'size-9 border-none text-text-primary hover:bg-accent hover:text-accent-foreground',
+                'size-9 border-none text-text-primary hover:bg-surface-hover hover:text-text-primary',
                 'rounded-lg border-none p-2 hover:bg-surface-active-alt',
                 'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-primary',
                 isMenuOpen ? 'bg-surface-hover' : '',
diff --git a/client/src/components/Nav/NavToggle.tsx b/client/src/components/Nav/NavToggle.tsx
index 07a4fdccf9..5b1abd5c0e 100644
--- a/client/src/components/Nav/NavToggle.tsx
+++ b/client/src/components/Nav/NavToggle.tsx
@@ -82,7 +82,7 @@ export default function NavToggle({
             <div className="flex h-6 w-6 flex-col items-center">
               {/* Top bar */}
               <div
-                className="h-3 w-1 rounded-full bg-black dark:bg-white"
+                className="h-3 w-1 rounded-full bg-surface-inverted"
                 style={{
                   ...transition,
                   transform: `translateY(0.15rem) rotate(${topBarRotation}) translateZ(0px)`,
@@ -90,7 +90,7 @@ export default function NavToggle({
               />
               {/* Bottom bar */}
               <div
-                className="h-3 w-1 rounded-full bg-black dark:bg-white"
+                className="h-3 w-1 rounded-full bg-surface-inverted"
                 style={{
                   ...transition,
                   transform: `translateY(-0.15rem) rotate(${bottomBarRotation}) translateZ(0px)`,
diff --git a/client/src/components/Nav/Settings/Dialog.tsx b/client/src/components/Nav/Settings/Dialog.tsx
index fa2f2dd413..cccf355847 100644
--- a/client/src/components/Nav/Settings/Dialog.tsx
+++ b/client/src/components/Nav/Settings/Dialog.tsx
@@ -63,7 +63,7 @@ export default function SettingsDialog({ open, onOpenChange }: TDialogProps) {
           <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
             <DialogPanel
               className={cn(
-                'flex max-h-[85vh] w-full flex-col overflow-hidden rounded-2xl bg-background shadow-2xl',
+                'flex max-h-[85vh] w-full flex-col overflow-hidden rounded-2xl bg-surface-primary shadow-2xl',
                 'md:h-[85vh] md:w-[900px]',
               )}
             >
diff --git a/client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx b/client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx
index 296be2ed01..3dbffee33b 100644
--- a/client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx
@@ -110,7 +110,7 @@ const BackupCodesItem: React.FC = () => {
           >
             {Array.isArray(user?.backupCodes) && user?.backupCodes.length > 0 ? (
               <>
-                <div className="border-warning-300 bg-warning-50 dark:border-warning-700 dark:bg-warning-900/20 mb-6 rounded-lg border p-4">
+                <div className="mb-6 rounded-lg border border-status-warning-border bg-status-warning-subtle p-4">
                   <p className="text-sm text-text-secondary">
                     {localize('com_ui_backup_codes_security_info')}
                   </p>
@@ -146,8 +146,8 @@ const BackupCodesItem: React.FC = () => {
                         }}
                         className={`flex flex-col rounded-xl border p-4 backdrop-blur-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
                           isUsed
-                            ? 'border-red-200 bg-red-50/80 dark:border-red-800 dark:bg-red-900/20'
-                            : 'border-green-200 bg-green-50/80 dark:border-green-800 dark:bg-green-900/20'
+                            ? 'border-status-error-border bg-status-error-subtle'
+                            : 'border-status-success-border bg-status-success-subtle'
                         } `}
                       >
                         <div className="flex items-center justify-between" aria-hidden="true">
@@ -256,7 +256,7 @@ const BackupCodesItem: React.FC = () => {
                     setUseBackup(!useBackup);
                     setOtpToken('');
                   }}
-                  className="text-sm text-primary hover:underline"
+                  className="text-sm text-text-primary hover:underline"
                 >
                   {useBackup ? localize('com_ui_use_2fa_code') : localize('com_ui_use_backup_code')}
                 </button>
diff --git a/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx b/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
index e1e5d19d19..18ac7dcb41 100644
--- a/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
@@ -145,7 +145,7 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
                     setUseBackup(!useBackup);
                     setOtpToken('');
                   }}
-                  className="text-sm text-primary hover:underline"
+                  className="text-sm text-text-primary hover:underline"
                 >
                   {useBackup ? localize('com_ui_use_2fa_code') : localize('com_ui_use_backup_code')}
                 </button>
@@ -182,7 +182,7 @@ const renderDeleteButton = (
   <button
     className={cn(
       'mt-4 flex w-full items-center justify-center rounded-lg bg-surface-tertiary px-4 py-2 transition-all duration-200',
-      isLocked ? 'cursor-not-allowed opacity-30' : 'bg-surface-destructive text-destructive-foreground',
+      isLocked ? 'cursor-not-allowed opacity-30' : 'bg-surface-destructive text-white',
     )}
     onClick={handleDeleteUser}
     disabled={isDeleting || isLocked}
diff --git a/client/src/components/Nav/SettingsTabs/Account/TwoFactorAuthentication.tsx b/client/src/components/Nav/SettingsTabs/Account/TwoFactorAuthentication.tsx
index c21e295ed1..638b2a2743 100644
--- a/client/src/components/Nav/SettingsTabs/Account/TwoFactorAuthentication.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/TwoFactorAuthentication.tsx
@@ -221,7 +221,7 @@ const TwoFactorAuthentication: React.FC = () => {
           >
             <OGDialogHeader>
               <OGDialogTitle className="mb-2 flex items-center gap-3 text-2xl font-bold">
-                <SmartphoneIcon className="h-6 w-6 text-primary" aria-hidden="true" />
+                <SmartphoneIcon className="h-6 w-6 text-text-primary" aria-hidden="true" />
                 {user?.twoFactorEnabled
                   ? localize('com_ui_2fa_disable')
                   : localize('com_ui_2fa_setup')}
diff --git a/client/src/components/Nav/SettingsTabs/Account/TwoFactorPhases/DisablePhase.tsx b/client/src/components/Nav/SettingsTabs/Account/TwoFactorPhases/DisablePhase.tsx
index 23017bec12..d3fea1cd89 100644
--- a/client/src/components/Nav/SettingsTabs/Account/TwoFactorPhases/DisablePhase.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/TwoFactorPhases/DisablePhase.tsx
@@ -79,7 +79,7 @@ export const DisablePhase: React.FC<DisablePhaseProps> = ({ onDisable, isDisabli
       </Button>
       <button
         onClick={() => setUseBackup(!useBackup)}
-        className="text-sm text-primary hover:underline"
+        className="text-sm text-text-primary hover:underline"
       >
         {useBackup ? localize('com_ui_use_2fa_code') : localize('com_ui_use_backup_code')}
       </button>
diff --git a/client/src/components/Nav/SettingsTabs/Account/TwoFactorPhases/QRPhase.tsx b/client/src/components/Nav/SettingsTabs/Account/TwoFactorPhases/QRPhase.tsx
index 12c8a78824..5bce67034e 100644
--- a/client/src/components/Nav/SettingsTabs/Account/TwoFactorPhases/QRPhase.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/TwoFactorPhases/QRPhase.tsx
@@ -28,7 +28,7 @@ export const QRPhase: React.FC<QRPhaseProps> = ({ secret, otpauthUrl, onNext })
         <motion.div
           initial={{ scale: 0.8, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
-          className="rounded-2xl bg-white p-4 shadow-lg"
+          className="rounded-2xl bg-surface-fixed p-4 shadow-lg"
         >
           <QRCodeSVG value={otpauthUrl} size={240} />
         </motion.div>
diff --git a/client/src/components/Nav/SettingsTabs/ApiKeys/ApiKeys.tsx b/client/src/components/Nav/SettingsTabs/ApiKeys/ApiKeys.tsx
index a857ddd8c3..769daf0476 100644
--- a/client/src/components/Nav/SettingsTabs/ApiKeys/ApiKeys.tsx
+++ b/client/src/components/Nav/SettingsTabs/ApiKeys/ApiKeys.tsx
@@ -30,7 +30,7 @@ export default function ApiKeys() {
           </Button>
         </OGDialogTrigger>
         <OGDialogContent
-          className="w-11/12 max-w-2xl bg-background text-text-primary shadow-2xl"
+          className="w-11/12 max-w-2xl bg-surface-primary text-text-primary shadow-2xl"
           aria-describedby={undefined}
         >
           <OGDialogHeader className="space-y-0 pr-8 text-left">
diff --git a/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx b/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
index 33cc7cd8fb..9a20fda1c9 100644
--- a/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
+++ b/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
@@ -199,7 +199,7 @@ export default function SharedLinks() {
                 to={`/share/${shareId}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group flex items-center gap-1 truncate rounded-sm text-link underline decoration-1 underline-offset-2 hover:decoration-2 focus:outline-none focus:ring-2 focus:ring-ring"
+                className="group flex items-center gap-1 truncate rounded-sm text-link underline decoration-1 underline-offset-2 hover:decoration-2 focus:outline-none focus:ring-2 focus:ring-text-primary"
                 title={title}
               >
                 <span className="truncate">{title}</span>
@@ -275,7 +275,7 @@ export default function SharedLinks() {
                   href={`/c/${row.original.conversationId}`}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex h-8 w-8 items-center justify-center rounded-md p-0 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-ring"
+                  className="flex h-8 w-8 items-center justify-center rounded-md p-0 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-text-primary"
                   aria-label={localize('com_ui_open_source_chat_new_tab_title', {
                     title: row.original.title || localize('com_ui_untitled'),
                   })}
@@ -324,7 +324,7 @@ export default function SharedLinks() {
 
         <OGDialogContent
           title={localize('com_nav_shared_links')}
-          className="w-11/12 max-w-5xl bg-background text-text-primary shadow-2xl"
+          className="w-11/12 max-w-5xl bg-surface-primary text-text-primary shadow-2xl"
         >
           <OGDialogHeader>
             <OGDialogTitle>{localize('com_nav_shared_links')}</OGDialogTitle>
diff --git a/client/src/components/Nav/SettingsTabs/General/ArchivedChatsModal.tsx b/client/src/components/Nav/SettingsTabs/General/ArchivedChatsModal.tsx
index 0f8c84a3ab..fa0449d326 100644
--- a/client/src/components/Nav/SettingsTabs/General/ArchivedChatsModal.tsx
+++ b/client/src/components/Nav/SettingsTabs/General/ArchivedChatsModal.tsx
@@ -31,7 +31,7 @@ export function ArchivedChatsModal({
         tabIndex={-1}
         onOpenAutoFocus={handleOpenAutoFocus}
         title={localize('com_nav_archived_chats')}
-        className="w-11/12 max-w-[1000px] bg-background text-text-primary shadow-2xl focus:outline-none"
+        className="w-11/12 max-w-[1000px] bg-surface-primary text-text-primary shadow-2xl focus:outline-none"
       >
         <OGDialogHeader>
           <OGDialogTitle>{localize('com_nav_archived_chats')}</OGDialogTitle>
diff --git a/client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx b/client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx
index 539d83b58b..7e3e0b6136 100644
--- a/client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx
+++ b/client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx
@@ -178,7 +178,7 @@ export default function ArchivedChatsTable({
                 to={`/c/${conversationId}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group flex items-center gap-1 truncate rounded-sm text-link underline decoration-1 underline-offset-2 hover:decoration-2 focus:outline-none focus:ring-2 focus:ring-ring"
+                className="group flex items-center gap-1 truncate rounded-sm text-link underline decoration-1 underline-offset-2 hover:decoration-2 focus:outline-none focus:ring-2 focus:ring-text-primary"
                 title={title}
                 aria-label={localize('com_ui_open_archived_chat_new_tab_title', { title })}
               >
diff --git a/client/src/components/OAuth/OAuthError.tsx b/client/src/components/OAuth/OAuthError.tsx
index 3e3206d210..012fa06b74 100644
--- a/client/src/components/OAuth/OAuthError.tsx
+++ b/client/src/components/OAuth/OAuthError.tsx
@@ -61,7 +61,7 @@ export default function OAuthError() {
         <p className="mb-6 text-sm text-text-secondary">{getErrorMessage(error)}</p>
         <button
           onClick={() => window.close()}
-          className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-ring-primary focus:ring-offset-2"
+          className="rounded-md bg-surface-inverted px-4 py-2 text-sm font-medium text-text-inverted hover:bg-surface-inverted-hover focus:outline-none focus:ring-2 focus:ring-ring-primary focus:ring-offset-2"
           aria-label={localize('com_ui_close_window') || 'Close Window'}
         >
           {localize('com_ui_close_window') || 'Close Window'}
diff --git a/client/src/components/Plugins/Store/PluginAuthForm.tsx b/client/src/components/Plugins/Store/PluginAuthForm.tsx
index 8857b2f57d..8d7ba18e3b 100644
--- a/client/src/components/Plugins/Store/PluginAuthForm.tsx
+++ b/client/src/components/Plugins/Store/PluginAuthForm.tsx
@@ -41,7 +41,7 @@ function PluginAuthForm({ plugin, onSubmit, isEntityTool }: TPluginAuthFormProps
             const authField = config.authField.split('||')[0];
             const isOptional = config.optional === true;
             const inputClassName =
-              'flex h-10 max-h-10 w-full resize-none rounded-md border border-border-light bg-transparent px-3 py-2 text-sm text-text-secondary shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-text-tertiary focus:border-border-medium focus:bg-surface-secondary focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
+              'flex h-10 max-h-10 w-full resize-none rounded-md border border-border-light bg-transparent px-3 py-2 text-sm text-text-secondary shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-text-tertiary focus:border-border-medium focus:bg-surface-secondary focus:outline-none focus:ring-0 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
             const sharedProps = {
               id: authField,
               'aria-invalid': !!errors[authField],
@@ -69,7 +69,7 @@ function PluginAuthForm({ plugin, onSubmit, isEntityTool }: TPluginAuthFormProps
               <div key={`${authField}-${i}`} className="flex w-full flex-col gap-1">
                 <label
                   htmlFor={authField}
-                  className="mb-1 text-left text-sm font-medium text-gray-700/70 dark:text-gray-50/70"
+                  className="mb-1 text-left text-sm font-medium text-text-primary"
                 >
                   {config.label}
                 </label>
diff --git a/client/src/components/Plugins/Store/PluginPagination.tsx b/client/src/components/Plugins/Store/PluginPagination.tsx
index d08fb6667e..449c03aa08 100644
--- a/client/src/components/Plugins/Store/PluginPagination.tsx
+++ b/client/src/components/Plugins/Store/PluginPagination.tsx
@@ -23,7 +23,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
   };
 
   return (
-    <div className="flex gap-2 text-sm text-black/60 dark:text-white/70">
+    <div className="flex gap-2 text-sm text-text-secondary">
       <div
         role="button"
         tabIndex={0}
@@ -36,8 +36,8 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
         }}
         className={`flex cursor-default items-center text-sm ${
           currentPage === 1
-            ? 'text-black/70 opacity-50 dark:text-white/70'
-            : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
+            ? 'text-text-secondary opacity-50'
+            : 'text-text-secondary hover:text-text-primary'
         }`}
         style={{ userSelect: 'none' }}
       >
@@ -90,8 +90,8 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
         }}
         className={`flex cursor-default items-center text-sm ${
           currentPage === maxPage
-            ? 'text-black/70 opacity-50 dark:text-white/70'
-            : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
+            ? 'text-text-secondary opacity-50'
+            : 'text-text-secondary hover:text-text-primary'
         }`}
         style={{ userSelect: 'none' }}
       >
diff --git a/client/src/components/Prompts/display/PromptVersions.tsx b/client/src/components/Prompts/display/PromptVersions.tsx
index 111ab29fee..dff7e4a54e 100644
--- a/client/src/components/Prompts/display/PromptVersions.tsx
+++ b/client/src/components/Prompts/display/PromptVersions.tsx
@@ -26,8 +26,8 @@ const VersionBadge = ({
           className={cn(
             'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
             isProduction
-              ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400'
-              : 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+              ? 'bg-status-success-subtle text-status-success'
+              : 'bg-status-info-subtle text-status-info',
           )}
         >
           {isProduction ? (
@@ -106,7 +106,7 @@ const VersionCard = ({
         className={cn(
           'group mb-2 ml-2 flex flex-1 flex-col rounded-lg border p-3 text-left',
           isSelected
-            ? 'border-green-500/50 bg-green-50/50 dark:bg-green-950/20'
+            ? 'border-status-success-border bg-status-success-subtle'
             : 'border-border-medium bg-transparent hover:border-border-heavy hover:bg-surface-hover',
         )}
         onClick={onClick}
@@ -116,7 +116,7 @@ const VersionCard = ({
           <span
             className={cn(
               'text-sm font-semibold',
-              isSelected ? 'text-green-700 dark:text-green-400' : 'text-text-primary',
+              isSelected ? 'text-status-success' : 'text-text-primary',
             )}
           >
             {localize('com_ui_version_var', { 0: versionNumber })}
diff --git a/client/src/components/Prompts/fields/CategorySelector.tsx b/client/src/components/Prompts/fields/CategorySelector.tsx
index 1601e28d79..1a832a5d17 100644
--- a/client/src/components/Prompts/fields/CategorySelector.tsx
+++ b/client/src/components/Prompts/fields/CategorySelector.tsx
@@ -74,7 +74,7 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({
   const trigger = (
     <Ariakit.MenuButton
       className={cn(
-        'focus:ring-offset-ring-offset relative inline-flex h-9 items-center justify-between rounded-xl border border-border-medium bg-transparent px-3 text-sm text-text-primary transition-all duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus:ring-ring-primary',
+        'focus:ring-offset-ring-offset relative inline-flex h-9 items-center justify-between rounded-xl border border-border-medium bg-transparent px-3 text-sm text-text-primary transition-all duration-200 ease-in-out hover:bg-surface-hover hover:text-text-primary focus:ring-ring-primary',
         'gap-2 sm:w-fit',
         className,
       )}
diff --git a/client/src/components/Prompts/forms/PromptForm.tsx b/client/src/components/Prompts/forms/PromptForm.tsx
index 722498564c..523ea7e04c 100644
--- a/client/src/components/Prompts/forms/PromptForm.tsx
+++ b/client/src/components/Prompts/forms/PromptForm.tsx
@@ -76,7 +76,7 @@ const VersionsPanel = React.memo(
               className={cn(
                 'w-full gap-1.5 transition-all duration-200',
                 isProductionVersion &&
-                  'border border-green-500/30 bg-green-50 text-green-700 hover:bg-green-100 dark:bg-green-950/30 dark:text-green-400 dark:hover:bg-green-950/50',
+                  'border border-status-success-border bg-status-success-subtle text-status-success hover:bg-status-success-subtle',
               )}
               onClick={() => {
                 if (!selectedPrompt) {
diff --git a/client/src/components/Prompts/forms/VariableForm.tsx b/client/src/components/Prompts/forms/VariableForm.tsx
index cb3ff6af7f..02ac40e20e 100644
--- a/client/src/components/Prompts/forms/VariableForm.tsx
+++ b/client/src/components/Prompts/forms/VariableForm.tsx
@@ -145,7 +145,7 @@ export default function VariableForm({
   return (
     <div className="mx-auto p-1 md:container">
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-        <div className="mb-6 max-h-screen max-w-[80vw] overflow-auto rounded-md bg-surface-tertiary p-4 text-text-secondary dark:bg-surface-primary sm:max-w-full md:max-h-96">
+        <div className="mb-6 max-h-screen max-w-[80vw] overflow-auto rounded-md bg-surface-tertiary p-4 text-text-secondary sm:max-w-full md:max-h-96">
           <ReactMarkdown
             /** @ts-ignore */
             remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
@@ -157,7 +157,7 @@ export default function VariableForm({
             ]}
             /** @ts-ignore */
             components={{ code: codeNoExecution, p: PromptVariableGfm }}
-            className="markdown prose dark:prose-invert light my-1 max-h-[50vh] max-w-full break-words dark:text-text-secondary"
+            className="markdown prose dark:prose-invert light my-1 max-h-[50vh] max-w-full break-words"
           >
             {generateHighlightedMarkdown()}
           </ReactMarkdown>
diff --git a/client/src/components/Share/Message.tsx b/client/src/components/Share/Message.tsx
index 3492054698..16deeb8c7c 100644
--- a/client/src/components/Share/Message.tsx
+++ b/client/src/components/Share/Message.tsx
@@ -51,7 +51,7 @@ export default function Message(props: TMessageProps) {
 
   return (
     <>
-      <div className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent">
+      <div className="text-token-text-primary w-full border-0 bg-transparent">
         <div className="m-auto justify-center p-4 py-2 md:gap-6">
           <div className="final-completion group mx-auto flex flex-1 gap-3 md:max-w-[47rem] md:px-5 lg:px-1 xl:max-w-[55rem] xl:px-5">
             <div className="relative flex flex-shrink-0 flex-col items-end">
diff --git a/client/src/components/Share/MessagesView.tsx b/client/src/components/Share/MessagesView.tsx
index 0fff0956b5..d89ea91439 100644
--- a/client/src/components/Share/MessagesView.tsx
+++ b/client/src/components/Share/MessagesView.tsx
@@ -22,9 +22,9 @@ export default function MessagesView({
             width: '100%',
           }}
         >
-          <div className="flex flex-col pb-16 text-sm dark:bg-transparent">
+          <div className="flex flex-col pb-16 text-sm">
             {(_messagesTree && _messagesTree.length === 0) || _messagesTree === null ? (
-              <div className="flex w-full items-center justify-center gap-1 bg-surface-secondary p-3 text-sm text-text-tertiary dark:border-gray-800/50">
+              <div className="flex w-full items-center justify-center gap-1 bg-surface-secondary p-3 text-sm text-text-tertiary">
                 {localize('com_ui_nothing_found')}
               </div>
             ) : (
diff --git a/client/src/components/Share/ShareView.tsx b/client/src/components/Share/ShareView.tsx
index 20a354742a..8ed0303d53 100644
--- a/client/src/components/Share/ShareView.tsx
+++ b/client/src/components/Share/ShareView.tsx
@@ -128,7 +128,7 @@ function SharedView() {
   );
 
   const mainContent = (
-    <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden pt-0 dark:bg-surface-secondary">
+    <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-surface-secondary pt-0">
       <div className="relative flex h-full min-h-0 flex-col text-text-primary" role="presentation">
         {content}
         {footer}
diff --git a/client/src/components/Sharing/GenericGrantAccessDialog.tsx b/client/src/components/Sharing/GenericGrantAccessDialog.tsx
index 30e466aeb3..00dc6bc2f6 100644
--- a/client/src/components/Sharing/GenericGrantAccessDialog.tsx
+++ b/client/src/components/Sharing/GenericGrantAccessDialog.tsx
@@ -284,7 +284,7 @@ export default function GenericGrantAccessDialog({
       disabled={disabled}
       className={cn('h-9', buttonClassName)}
     >
-      <div className="flex min-w-[32px] items-center justify-center gap-2 text-blue-500">
+      <div className="flex min-w-[32px] items-center justify-center gap-2 text-status-info">
         <span className="flex h-6 w-6 items-center justify-center">
           <Share2Icon className="icon-md h-4 w-4" />
         </span>
@@ -356,7 +356,7 @@ export default function GenericGrantAccessDialog({
                   return (
                     <div className="space-y-2">
                       {!hasAtLeastOneOwner && hasChanges && (
-                        <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-center">
+                        <div className="rounded-lg border border-status-error-border bg-status-error-subtle p-3 text-center">
                           <div className="flex items-center justify-center gap-2 text-sm text-text-destructive">
                             <UserX className="h-4 w-4" aria-hidden="true" />
                             {localize('com_ui_at_least_one_owner_required')}
diff --git a/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx b/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
index 05ee3704a5..c2fbbff1d9 100644
--- a/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
+++ b/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
@@ -38,7 +38,7 @@ export default function SelectedPrincipalsList({
   if (principles.length === 0) {
     return (
       <div className={`space-y-3 ${className}`}>
-        <div className="rounded-lg border border-dashed border-border-medium py-8 text-center text-muted-foreground">
+        <div className="rounded-lg border border-dashed border-border-medium py-8 text-center text-text-secondary">
           <Users className="mx-auto mb-2 h-8 w-8 opacity-50" aria-hidden="true" />
           <p className="mt-1 text-xs">{localize('com_ui_search_above_to_add_all')}</p>
         </div>
@@ -58,14 +58,14 @@ export default function SelectedPrincipalsList({
           return (
             <div
               key={share.idOnTheSource + '-principalList'}
-              className="bg-surface flex items-center justify-between rounded-2xl border border-border p-3"
+              className="bg-surface flex items-center justify-between rounded-2xl border border-border-light p-3"
             >
               <div className="flex min-w-0 flex-1 items-center gap-3">
                 <PrincipalAvatar principal={share} size="md" />
 
                 <div className="min-w-0 flex-1">
                   <div className="truncate text-sm font-medium">{displayName}</div>
-                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <div className="flex items-center gap-1 text-xs text-text-secondary">
                     <span>{subtitle}</span>
                     {share.source === 'entra' && (
                       <>
@@ -99,7 +99,7 @@ export default function SelectedPrincipalsList({
                   <Button
                     variant="outline"
                     onClick={() => onRemoveHandler(share.idOnTheSource!)}
-                    className="h-9 w-9 p-0 hover:border-destructive/10 hover:bg-destructive/10 hover:text-destructive"
+                    className="h-9 w-9 p-0 hover:border-status-error-border hover:bg-status-error-subtle hover:text-text-destructive"
                     aria-label={localize('com_ui_remove_user', { 0: displayName })}
                   >
                     <X className="h-4 w-4" aria-hidden="true" />
diff --git a/client/src/components/Sharing/PublicSharingToggle.tsx b/client/src/components/Sharing/PublicSharingToggle.tsx
index e93df4bf67..35a70dd9d9 100644
--- a/client/src/components/Sharing/PublicSharingToggle.tsx
+++ b/client/src/components/Sharing/PublicSharingToggle.tsx
@@ -54,7 +54,7 @@ export default function PublicSharingToggle({
             <div
               className={cn(
                 'transition-colors duration-200',
-                isPublic ? 'text-blue-600 dark:text-blue-500' : 'text-text-secondary',
+                isPublic ? 'text-status-info' : 'text-text-secondary',
               )}
             >
               <Globe className="size-5" />
@@ -114,9 +114,7 @@ export default function PublicSharingToggle({
               <div
                 className={cn(
                   'transition-all duration-300',
-                  isPublic
-                    ? 'scale-100 text-blue-600 dark:text-blue-500'
-                    : 'scale-95 text-text-secondary',
+                  isPublic ? 'scale-100 text-status-info' : 'scale-95 text-text-secondary',
                 )}
               >
                 <Shield className="size-5" />
diff --git a/client/src/components/Skills/buttons/SkillToggle.tsx b/client/src/components/Skills/buttons/SkillToggle.tsx
index 39a27adf67..542b968893 100644
--- a/client/src/components/Skills/buttons/SkillToggle.tsx
+++ b/client/src/components/Skills/buttons/SkillToggle.tsx
@@ -28,7 +28,7 @@ function SkillToggle({ enabled, onChange, ariaLabel }: SkillToggleProps) {
       >
         <span
           className={cn(
-            'pointer-events-none mt-0.5 inline-block size-4 rounded-full bg-white shadow-sm transition-transform duration-200',
+            'pointer-events-none mt-0.5 inline-block size-4 rounded-full bg-surface-fixed shadow-sm transition-transform duration-200',
             enabled ? 'translate-x-[1.125rem]' : 'translate-x-0.5',
           )}
         />
diff --git a/client/src/components/Skills/forms/CategorySelector.tsx b/client/src/components/Skills/forms/CategorySelector.tsx
index a247a59436..cabf7587b6 100644
--- a/client/src/components/Skills/forms/CategorySelector.tsx
+++ b/client/src/components/Skills/forms/CategorySelector.tsx
@@ -42,7 +42,7 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({ className = '' }) =
   const trigger = (
     <Ariakit.MenuButton
       className={cn(
-        'focus:ring-offset-ring-offset relative inline-flex h-9 items-center justify-between rounded-xl border border-border-medium bg-transparent px-3 text-sm text-text-primary transition-all duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus:ring-ring-primary',
+        'focus:ring-offset-ring-offset relative inline-flex h-9 items-center justify-between rounded-xl border border-border-medium bg-transparent px-3 text-sm text-text-primary transition-all duration-200 ease-in-out hover:bg-surface-hover hover:text-text-primary focus:ring-ring-primary',
         'gap-2 sm:w-fit',
         className,
       )}
diff --git a/client/src/components/Tools/MCPToolItem.tsx b/client/src/components/Tools/MCPToolItem.tsx
index 7e9012e8ce..d84590ba8e 100644
--- a/client/src/components/Tools/MCPToolItem.tsx
+++ b/client/src/components/Tools/MCPToolItem.tsx
@@ -80,14 +80,14 @@ function MCPToolItem({
               <img
                 src={icon}
                 alt={localize('com_ui_logo', { 0: name })}
-                className="h-full w-full rounded-[5px] bg-white"
+                className="h-full w-full rounded-[5px] bg-surface-fixed"
               />
             ) : (
               <div className="flex h-full w-full items-center justify-center rounded-[5px] border border-border-medium bg-transparent">
                 <Wrench className="h-8 w-8 text-text-secondary" />
               </div>
             )}
-            <div className="absolute inset-0 rounded-[5px] ring-1 ring-inset ring-black/10"></div>
+            <div className="absolute inset-0 rounded-[5px] ring-1 ring-inset ring-border-light"></div>
           </div>
         </div>
         <div className="flex min-w-0 flex-col items-start justify-between">
diff --git a/client/src/components/Tools/ToolItem.tsx b/client/src/components/Tools/ToolItem.tsx
index 99e5a4b67c..c89142f7c0 100644
--- a/client/src/components/Tools/ToolItem.tsx
+++ b/client/src/components/Tools/ToolItem.tsx
@@ -36,14 +36,14 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled = false }: ToolIt
               <img
                 src={icon}
                 alt={localize('com_ui_logo', { 0: name })}
-                className="h-full w-full rounded-[5px] bg-white"
+                className="h-full w-full rounded-[5px] bg-surface-fixed"
               />
             ) : (
               <div className="flex h-full w-full items-center justify-center rounded-[5px] border border-border-medium bg-transparent">
                 <Wrench className="h-8 w-8 text-text-secondary" />
               </div>
             )}
-            <div className="absolute inset-0 rounded-[5px] ring-1 ring-inset ring-black/10"></div>
+            <div className="absolute inset-0 rounded-[5px] ring-1 ring-inset ring-border-light"></div>
           </div>
         </div>
         <div className="flex min-w-0 flex-col items-start justify-between">
@@ -63,7 +63,7 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled = false }: ToolIt
             </button>
           ) : (
             <button
-              className="btn relative bg-gray-300 hover:bg-gray-400 dark:bg-gray-50 dark:hover:bg-gray-200"
+              className="btn relative bg-surface-tertiary hover:bg-surface-hover"
               onClick={handleClick}
               aria-label={`${localize('com_nav_tool_remove')} ${name}`}
             >
diff --git a/client/src/components/Web/SourceHovercard.tsx b/client/src/components/Web/SourceHovercard.tsx
index 3fe359ff1b..126140bfdf 100644
--- a/client/src/components/Web/SourceHovercard.tsx
+++ b/client/src/components/Web/SourceHovercard.tsx
@@ -133,7 +133,7 @@ export function SourceHovercard({
               isFile ? (
                 <button
                   onClick={handleFileClick}
-                  className="ml-1 inline-flex h-5 max-w-36 items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap rounded-xl border border-border-heavy bg-surface-secondary px-2 text-xs font-medium text-text-primary no-underline transition-colors hover:bg-surface-hover dark:border-border-medium dark:hover:bg-surface-tertiary"
+                  className="ml-1 inline-flex h-5 max-w-36 items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap rounded-xl border border-border-heavy bg-surface-secondary px-2 text-xs font-medium text-text-primary no-underline transition-colors hover:bg-surface-hover"
                   onMouseEnter={onMouseEnter}
                   onMouseLeave={onMouseLeave}
                   title={
@@ -148,7 +148,7 @@ export function SourceHovercard({
                   href={source.link}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="ml-1 inline-block h-5 max-w-36 cursor-pointer items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-xl border border-border-heavy bg-surface-secondary px-2 text-xs font-medium no-underline transition-colors hover:bg-surface-hover dark:border-border-medium dark:hover:bg-surface-tertiary"
+                  className="ml-1 inline-block h-5 max-w-36 cursor-pointer items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-xl border border-border-heavy bg-surface-secondary px-2 text-xs font-medium no-underline transition-colors hover:bg-surface-hover"
                   onMouseEnter={onMouseEnter}
                   onMouseLeave={onMouseLeave}
                 >
@@ -157,7 +157,7 @@ export function SourceHovercard({
               )
             }
           />
-          <Ariakit.HovercardDisclosure className="ml-0.5 rounded-full text-text-primary focus:outline-none focus:ring-2 focus:ring-ring">
+          <Ariakit.HovercardDisclosure className="ml-0.5 rounded-full text-text-primary focus:outline-none focus:ring-2 focus:ring-text-primary">
             <VisuallyHidden>{localize('com_citation_more_details', { label })}</VisuallyHidden>
             <ChevronDown className="icon-sm" aria-hidden="true" />
           </Ariakit.HovercardDisclosure>
diff --git a/client/src/components/Web/Sources.tsx b/client/src/components/Web/Sources.tsx
index 8374c9631d..5705d300a6 100644
--- a/client/src/components/Web/Sources.tsx
+++ b/client/src/components/Web/Sources.tsx
@@ -81,7 +81,7 @@ function SourceItem({ source, expanded = false }: SourceItemProps) {
               </a>
             }
           />
-          <Ariakit.HovercardDisclosure className="absolute right-2 rounded-full text-text-primary focus:outline-none focus:ring-2 focus:ring-ring">
+          <Ariakit.HovercardDisclosure className="absolute right-2 rounded-full text-text-primary focus:outline-none focus:ring-2 focus:ring-text-primary">
             <VisuallyHidden>
               {localize('com_citation_more_details', { label: domain })}
             </VisuallyHidden>
@@ -319,7 +319,9 @@ const FileItem = React.memo(function FileItem({
             </span>
           )}
         </div>
-        {error && <div className="mt-1 text-xs text-text-destructive">{getErrorMessage(error)}</div>}
+        {error && (
+          <div className="mt-1 text-xs text-text-destructive">{getErrorMessage(error)}</div>
+        )}
       </button>
     );
   }
@@ -723,7 +725,7 @@ function SourcesComponent({ messageId, conversationId }: SourcesProps = {}) {
         containerClassName="flex min-w-full mb-4"
         tabListClassName="flex items-center mb-2 border-b border-border-light overflow-x-auto"
         tabPanelClassName="w-full overflow-x-auto scrollbar-none md:mx-0 md:px-0"
-        tabClassName="flex items-center whitespace-nowrap text-xs font-medium text-token-text-secondary px-1 pt-2 pb-1 border-b-2 border-transparent data-[state=active]:text-text-primary outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+        tabClassName="flex items-center whitespace-nowrap text-xs font-medium text-token-text-secondary px-1 pt-2 pb-1 border-b-2 border-transparent data-[state=active]:text-text-primary outline-none focus:ring-2 focus:ring-text-primary focus:ring-offset-2"
       />
     </div>
   );
@@ -752,7 +754,7 @@ export default function Sources(props: SourcesProps) {
       </div>
       <button
         onClick={() => window.location.reload()}
-        className="hover:bg-surface-primary-hover rounded-md bg-surface-primary px-3 py-1 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-ring"
+        className="hover:bg-surface-primary-hover rounded-md bg-surface-primary px-3 py-1 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-text-primary"
         aria-label={localize('com_sources_reload_page')}
       >
         {localize('com_ui_refresh')}
diff --git a/client/src/components/Web/SourcesErrorBoundary.tsx b/client/src/components/Web/SourcesErrorBoundary.tsx
index 1c5fdc87b9..d39f8e8bdb 100644
--- a/client/src/components/Web/SourcesErrorBoundary.tsx
+++ b/client/src/components/Web/SourcesErrorBoundary.tsx
@@ -41,7 +41,7 @@ class SourcesErrorBoundary extends Component<Props, State> {
           <div className="mb-2 text-sm text-text-secondary">Sources temporarily unavailable</div>
           <button
             onClick={() => window.location.reload()}
-            className="hover:bg-surface-primary-hover rounded-md bg-surface-primary px-3 py-1 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-ring"
+            className="hover:bg-surface-primary-hover rounded-md bg-surface-primary px-3 py-1 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-text-primary"
             aria-label="Reload the page"
           >
             Refresh
diff --git a/client/src/hooks/Endpoint/UnknownIcon.tsx b/client/src/hooks/Endpoint/UnknownIcon.tsx
index e7b245a797..03f8874614 100644
--- a/client/src/hooks/Endpoint/UnknownIcon.tsx
+++ b/client/src/hooks/Endpoint/UnknownIcon.tsx
@@ -91,11 +91,11 @@ function UnknownIcon({
   const currentEndpoint = endpoint.toLowerCase();
 
   if (currentEndpoint === KnownEndpoints.xai) {
-    return <XAIcon className={cn(className, 'text-black dark:text-white')} />;
+    return <XAIcon className={cn(className, 'text-text-primary')} />;
   }
 
   if (currentEndpoint === KnownEndpoints.moonshot) {
-    return <MoonshotIcon className={cn(className, 'text-black dark:text-white')} />;
+    return <MoonshotIcon className={cn(className, 'text-text-primary')} />;
   }
 
   if (iconURL) {
diff --git a/client/src/routes/RouteErrorBoundary.tsx b/client/src/routes/RouteErrorBoundary.tsx
index 1de9b89690..f7ca1db5fa 100644
--- a/client/src/routes/RouteErrorBoundary.tsx
+++ b/client/src/routes/RouteErrorBoundary.tsx
@@ -135,7 +135,7 @@ export default function RouteErrorBoundary() {
         </h2>
 
         {/* Error Message */}
-        <div className="mb-4 rounded-xl border border-red-500/20 bg-red-500/5 p-4 text-sm text-gray-600 dark:text-gray-200">
+        <div className="mb-4 rounded-xl border border-status-error-border bg-status-error-subtle p-4 text-sm text-text-secondary">
           <h3 className="mb-2 font-medium">{localize('com_ui_error_message_prefix')}</h3>
           <pre className="whitespace-pre-wrap text-sm font-light leading-relaxed text-text-primary">
             {errorDetails.message}
@@ -145,7 +145,7 @@ export default function RouteErrorBoundary() {
         {/* Status Information */}
         {(typeof errorDetails.status === 'number' ||
           typeof errorDetails.statusText === 'string') && (
-          <div className="mb-4 rounded-xl border border-yellow-500/20 bg-yellow-500/5 p-4 text-sm text-text-primary">
+          <div className="mb-4 rounded-xl border border-status-warning-border bg-status-warning-subtle p-4 text-sm text-text-primary">
             <h3 className="mb-2 font-medium">{localize('com_ui_status_prefix')}:</h3>
             <p className="text-text-primary">
               {typeof errorDetails.status === 'number' && `${errorDetails.status} `}
@@ -171,7 +171,7 @@ export default function RouteErrorBoundary() {
                 </Button>
               </div>
             </summary>
-            <div className="overflow-x-auto rounded-lg bg-black/5 p-4 dark:bg-white/5">
+            <div className="overflow-x-auto rounded-lg bg-surface-tertiary p-4">
               {formatStackTrace(errorDetails.stack).map(({ number, content }) => (
                 <div key={number} className="flex">
                   <span className="select-none pr-4 font-mono text-xs text-text-secondary">
diff --git a/client/src/routes/Search.tsx b/client/src/routes/Search.tsx
index b4db28c651..8f5962f0bc 100644
--- a/client/src/routes/Search.tsx
+++ b/client/src/routes/Search.tsx
@@ -96,7 +96,7 @@ export default function Search() {
       </div>
       {(messages && messages.length === 0) || messages == null ? (
         <div className="absolute inset-0 flex items-center justify-center">
-          <div className="rounded-lg bg-white p-6 text-lg text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
+          <div className="rounded-lg bg-surface-secondary p-6 text-lg text-text-secondary">
             {localize('com_ui_nothing_found')}
           </div>
         </div>
diff --git a/client/src/style.css b/client/src/style.css
index 8dafa0008e..3c3b4b9a9b 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -133,24 +133,17 @@ html {
   --status-neutral: var(--gray-600);
   --status-neutral-subtle: var(--gray-100);
   --status-neutral-border: var(--gray-300);
-  /* These are test styles */
 
+  --surface-inverted: var(--gray-850);
+  --surface-inverted-hover: var(--gray-700);
+  --text-inverted: var(--white);
+  --surface-fixed: var(--white);
+  --surface-fixed-hover: var(--gray-100);
+  --text-fixed: var(--gray-800);
+  /* Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration) */
   --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
   --primary: 0 0% 9%;
   --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
   --ring: 0 0% 3.9%;
   --radius: 0.5rem;
   --chart-1: 12 76% 61%;
@@ -215,24 +208,17 @@ html {
   --status-neutral: var(--gray-300);
   --status-neutral-subtle: var(--gray-800);
   --status-neutral-border: var(--gray-700);
-  /* These are test styles */
 
+  --surface-inverted: var(--white);
+  --surface-inverted-hover: var(--gray-100);
+  --text-inverted: var(--gray-850);
+  --surface-fixed: var(--white);
+  --surface-fixed-hover: var(--gray-100);
+  --text-fixed: var(--gray-800);
+  /* Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration) */
   --background: 0 0% 7%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
   --primary: 0 0% 98%;
   --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 40.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
   --ring: 0 0% 83.1%;
   --chart-1: 220 70% 50%;
   --chart-2: 160 60% 45%;
diff --git a/client/src/utils/buildTree.ts b/client/src/utils/buildTree.ts
index 836e87b509..36e4cc1313 100644
--- a/client/src/utils/buildTree.ts
+++ b/client/src/utils/buildTree.ts
@@ -1,9 +1,9 @@
 import type { TMessage } from 'librechat-data-provider';
 
 const even =
-  'w-full border-b border-black/10 dark:border-gray-800/50 text-gray-800 bg-white dark:text-gray-200 group dark:bg-gray-800 hover:bg-gray-200/25 hover:text-gray-700  dark:hover:bg-gray-800 dark:hover:text-gray-200';
+  'w-full border-b border-border-light text-text-primary bg-surface-secondary group hover:bg-surface-hover hover:text-text-primary';
 const odd =
-  'w-full border-b border-black/10 bg-gray-50 dark:border-gray-800/50 text-gray-800 dark:text-gray-200 group bg-gray-200 dark:bg-gray-700 hover:bg-gray-200/40 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200';
+  'w-full border-b border-border-light text-text-primary group bg-surface-active-alt hover:bg-surface-hover hover:text-text-primary';
 
 export function groupIntoList({
   messages,
diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts
index ea322b047f..f961066acb 100644
--- a/client/src/utils/index.ts
+++ b/client/src/utils/index.ts
@@ -82,16 +82,16 @@ export const removeFocusRings =
   'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0';
 
 export const cardStyle =
-  'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-gray-50 dark:data-[state=open]:bg-gray-700';
+  'transition-colors rounded-md min-w-[75px] border border-border-medium font-normal bg-surface-secondary hover:bg-surface-hover text-text-primary focus:outline-none data-[state=open]:bg-surface-hover';
 
 export const defaultTextProps =
-  'rounded-md border border-gray-200 focus:border-gray-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none focus-within:placeholder:text-text-primary focus:placeholder:text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:focus:bg-gray-600 dark:focus:border-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:outline-none';
+  'rounded-md border border-border-light focus:border-border-heavy focus:bg-surface-secondary bg-transparent text-sm text-text-primary shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none focus-within:placeholder:text-text-primary focus:placeholder:text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-text-primary focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
 
 export const optionText =
-  'p-0 shadow-none text-right pr-1 h-8 border-transparent hover:bg-gray-800/10 dark:hover:bg-white/10 dark:focus:bg-white/10 transition-colors';
+  'p-0 shadow-none text-right pr-1 h-8 border-transparent hover:bg-surface-hover transition-colors';
 
 export const defaultTextPropsLabel =
-  'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none focus-within:placeholder:text-text-primary focus:placeholder:text-text-primary placeholder:text-text-secondary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-600 dark:focus:outline-none';
+  'rounded-md border border-border-medium bg-transparent text-sm text-text-primary shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none focus-within:placeholder:text-text-primary focus:placeholder:text-text-primary placeholder:text-text-secondary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50';
 
 export function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
diff --git a/packages/client/src/components/Accordion.tsx b/packages/client/src/components/Accordion.tsx
index b013d0378f..698be0be67 100644
--- a/packages/client/src/components/Accordion.tsx
+++ b/packages/client/src/components/Accordion.tsx
@@ -36,7 +36,7 @@ const AccordionTrigger: React.ForwardRefExoticComponent<
       {...props}
     >
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-text-secondary transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
diff --git a/packages/client/src/components/AlertDialog.tsx b/packages/client/src/components/AlertDialog.tsx
index 3de8f59242..8aae1b5c1a 100644
--- a/packages/client/src/components/AlertDialog.tsx
+++ b/packages/client/src/components/AlertDialog.tsx
@@ -47,8 +47,7 @@ const AlertDialogContent: React.ForwardRefExoticComponent<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed z-50 grid w-full max-w-lg scale-100 gap-4 bg-white p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full',
-        'dark:bg-gray-900',
+        'fixed z-50 grid w-full max-w-lg scale-100 gap-4 bg-surface-dialog p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full',
         className,
       )}
       {...props}
@@ -88,7 +87,7 @@ const AlertDialogTitle: React.ForwardRefExoticComponent<
 >(({ className = '', ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold text-gray-900', 'dark:text-gray-50', className)}
+    className={cn('text-lg font-semibold text-text-primary', className)}
     {...props}
   />
 ));
@@ -106,7 +105,7 @@ const AlertDialogDescription: React.ForwardRefExoticComponent<
 >(({ className = '', ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-gray-500', 'dark:text-gray-400', className)}
+    className={cn('text-sm text-text-secondary', className)}
     {...props}
   />
 ));
@@ -125,7 +124,7 @@ const AlertDialogAction: React.ForwardRefExoticComponent<
   <AlertDialogPrimitive.Action
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-100 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
+      'inline-flex h-10 items-center justify-center rounded-md bg-surface-inverted px-4 py-2 text-sm font-semibold text-text-inverted transition-colors hover:bg-surface-inverted-hover focus:outline-none focus:ring-2 focus:ring-text-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}
@@ -146,7 +145,7 @@ const AlertDialogCancel: React.ForwardRefExoticComponent<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 sm:mt-0',
+      'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-border-light bg-transparent px-4 py-2 text-sm font-semibold text-text-primary transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-text-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:mt-0',
       className,
     )}
     {...props}
diff --git a/packages/client/src/components/AnimatedSearchInput.tsx b/packages/client/src/components/AnimatedSearchInput.tsx
index 1a07d72854..1a98cbfaeb 100644
--- a/packages/client/src/components/AnimatedSearchInput.tsx
+++ b/packages/client/src/components/AnimatedSearchInput.tsx
@@ -28,7 +28,7 @@ const AnimatedSearchInput = ({
             <Search
               className={cn(
                 `h-4 w-4 transition-all duration-500 ease-in-out`,
-                isSearching && hasValue ? 'text-blue-400' : 'text-gray-500',
+                isSearching && hasValue ? 'text-blue-400' : 'text-text-secondary',
               )}
             />
           </div>
@@ -40,7 +40,7 @@ const AnimatedSearchInput = ({
             onChange={onChange}
             placeholder={placeholder}
             aria-label={localize('com_ui_search')}
-            className={`peer relative z-20 w-full rounded-lg bg-surface-secondary py-2 pl-10 outline-none backdrop-blur-sm transition-all duration-500 ease-in-out placeholder:text-gray-500 focus:ring-ring`}
+            className={`peer relative z-20 w-full rounded-lg bg-surface-secondary py-2 pl-10 outline-none backdrop-blur-sm transition-all duration-500 ease-in-out placeholder:text-text-secondary focus:ring-text-primary`}
           />
 
           {/* Gradient overlay */}
diff --git a/packages/client/src/components/Breadcrumb.tsx b/packages/client/src/components/Breadcrumb.tsx
index 09e0e5e9af..0629254313 100644
--- a/packages/client/src/components/Breadcrumb.tsx
+++ b/packages/client/src/components/Breadcrumb.tsx
@@ -24,7 +24,7 @@ const BreadcrumbList: React.ForwardRefExoticComponent<
     <ol
       ref={ref}
       className={cn(
-        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-text-secondary sm:gap-2.5',
         className,
       )}
       {...props}
@@ -61,7 +61,7 @@ const BreadcrumbLink: React.ForwardRefExoticComponent<
   return (
     <Comp
       ref={ref}
-      className={cn('transition-colors hover:text-foreground', className)}
+      className={cn('transition-colors hover:text-text-primary', className)}
       {...props}
     />
   );
@@ -78,7 +78,7 @@ const BreadcrumbPage: React.ForwardRefExoticComponent<
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn('font-normal text-foreground', className)}
+      className={cn('font-normal text-text-primary', className)}
       {...props}
     />
   ),
diff --git a/packages/client/src/components/Button.tsx b/packages/client/src/components/Button.tsx
index 53150bde5a..1bb4248655 100644
--- a/packages/client/src/components/Button.tsx
+++ b/packages/client/src/components/Button.tsx
@@ -21,18 +21,17 @@ const buttonVariants: (
       } & ClassProp)
     | undefined,
 ) => string = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-surface-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-surface-destructive text-destructive-foreground hover:bg-surface-destructive-hover',
+        default: 'bg-surface-inverted text-text-inverted hover:bg-surface-inverted-hover',
+        destructive: 'bg-surface-destructive text-white hover:bg-surface-destructive-hover',
         outline:
-          'text-text-primary border border-border-light bg-transparent hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-surface-hover hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'text-text-primary border border-border-light bg-transparent hover:bg-surface-hover hover:text-text-primary',
+        secondary: 'bg-surface-secondary text-text-primary hover:bg-surface-hover',
+        ghost: 'hover:bg-surface-hover hover:text-text-primary',
+        link: 'text-text-primary underline-offset-4 hover:underline',
         // hardcoded text color because of WCAG contrast issues (text-white)
         submit: 'bg-surface-submit text-white hover:bg-surface-submit-hover',
       },
diff --git a/packages/client/src/components/Checkbox.tsx b/packages/client/src/components/Checkbox.tsx
index b4b45c221c..90369b45c6 100644
--- a/packages/client/src/components/Checkbox.tsx
+++ b/packages/client/src/components/Checkbox.tsx
@@ -27,7 +27,7 @@ const Checkbox: React.ForwardRefExoticComponent<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        'peer h-4 w-4 shrink-0 rounded-sm border border-border-xheavy ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        'peer h-4 w-4 shrink-0 rounded-sm border border-border-xheavy ring-offset-surface-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-surface-inverted data-[state=checked]:text-text-inverted',
         className,
       )}
       {...props}
diff --git a/packages/client/src/components/Combobox.tsx b/packages/client/src/components/Combobox.tsx
index 793a8af7de..41b8c46f09 100644
--- a/packages/client/src/components/Combobox.tsx
+++ b/packages/client/src/components/Combobox.tsx
@@ -82,7 +82,7 @@ export default function ComboboxComponent({
             isCollapsed
               ? 'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden'
               : '',
-            'bg-white text-black hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-gray-500 dark:bg-gray-850 dark:text-white',
+            'bg-surface-secondary text-text-primary hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-text-primary',
           )}
         >
           <SelectValue placeholder={selectPlaceholder}>
@@ -105,18 +105,18 @@ export default function ComboboxComponent({
             aria-label={ariaLabel + 's'}
             position="popper"
             className={cn(
-              'bg-popover text-popover-foreground relative z-40 max-h-[52vh] min-w-[8rem] overflow-hidden rounded-md border border-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-600',
+              'relative z-40 max-h-[52vh] min-w-[8rem] overflow-hidden rounded-md border border-border-light bg-surface-secondary text-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
               'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-              'bg-white dark:bg-gray-700',
+              'bg-surface-secondary',
             )}
           >
             <RadixSelect.Viewport className="mb-5 h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]">
-              <div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-white px-3 py-2 text-black duration-300 dark:bg-gray-700 dark:text-white">
-                <SearchIcon className="h-4 w-4 text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300" />
+              <div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-surface-secondary px-3 py-2 text-text-primary duration-300">
+                <SearchIcon className="h-4 w-4 text-text-secondary transition-colors duration-300 group-focus-within:text-text-primary group-hover:text-text-primary" />
                 <Combobox
                   autoSelect
                   placeholder={searchPlaceholder}
-                  className="flex-1 rounded-md border-none bg-transparent px-2.5 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-700/10 dark:focus:ring-gray-200/10"
+                  className="flex-1 rounded-md border-none bg-transparent px-2.5 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-border-medium"
                   // Ariakit's Combobox manually triggers a blur event on virtually
                   // blurred items, making them work as if they had actual DOM
                   // focus. These blur events might happen after the corresponding
@@ -133,7 +133,7 @@ export default function ComboboxComponent({
                 />
                 <ComboboxCancel
                   hideWhenEmpty={true}
-                  className="relative flex h-5 w-5 items-center justify-end text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300"
+                  className="relative flex h-5 w-5 items-center justify-end text-text-secondary transition-colors duration-300 group-focus-within:text-text-primary group-hover:text-text-primary"
                 />
               </div>
               <ComboboxList className="overflow-y-auto p-1 py-2">
@@ -141,8 +141,8 @@ export default function ComboboxComponent({
                   <RadixSelect.Item key={value} value={`${value ?? ''}`} asChild>
                     <ComboboxItem
                       className={cn(
-                        'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-                        'rounded-lg hover:bg-gray-100/50 hover:bg-gray-50 dark:text-white dark:hover:bg-gray-600',
+                        'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-surface-hover focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                        'rounded-lg hover:bg-surface-hover',
                       )}
                       /** Hacky fix for radix-ui Android issue: https://github.com/radix-ui/primitives/issues/1658  */
                       onTouchEnd={() => {
@@ -156,7 +156,7 @@ export default function ComboboxComponent({
                         </RadixSelect.ItemIndicator>
                       </span>
                       <RadixSelect.ItemText>
-                        <div className="flex items-center justify-center gap-3 dark:text-white [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground">
+                        <div className="flex items-center justify-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-text-primary">
                           <div className="assistant-item overflow-hidden rounded-full">
                             {icon && icon}
                           </div>
diff --git a/packages/client/src/components/DataTable.tsx b/packages/client/src/components/DataTable.tsx
index 9b3712aa81..b9b06a5e6b 100644
--- a/packages/client/src/components/DataTable.tsx
+++ b/packages/client/src/components/DataTable.tsx
@@ -198,7 +198,7 @@ const DeleteButton = memo(
           <Spinner className="size-4" />
         ) : (
           <>
-            <TrashIcon className="size-3.5 text-red-400 sm:size-4" />
+            <TrashIcon className="size-3.5 text-text-destructive sm:size-4" />
             {!isSmallScreen && <span className="ml-2">Delete</span>}
           </>
         )}
@@ -429,7 +429,7 @@ export default function DataTable<TData, TValue>({
       <div
         ref={tableContainerRef}
         className={cn(
-          'relative min-h-0 max-w-full flex-1 overflow-x-auto overflow-y-auto rounded-md border border-black/10 dark:border-white/10',
+          'relative min-h-0 max-w-full flex-1 overflow-x-auto overflow-y-auto rounded-md border border-border-light',
           'transition-all duration-300 ease-out',
           isSearching && 'bg-surface-secondary/50',
           className,
diff --git a/packages/client/src/components/DataTable/DataTable.tsx b/packages/client/src/components/DataTable/DataTable.tsx
index 2c11155e0a..f2ee999c6d 100644
--- a/packages/client/src/components/DataTable/DataTable.tsx
+++ b/packages/client/src/components/DataTable/DataTable.tsx
@@ -436,7 +436,7 @@ function DataTable<TData extends Record<string, unknown>, TValue>({
   return (
     <div
       className={cn(
-        'relative flex w-full flex-col overflow-hidden rounded-lg border border-border-light bg-background',
+        'relative flex w-full flex-col overflow-hidden rounded-lg border border-border-light bg-surface-primary',
         'h-[calc(100vh-8rem)] max-h-[80vh]',
         className,
       )}
diff --git a/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx b/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx
index 6d47cdafc5..ea583cdd67 100644
--- a/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx
+++ b/packages/client/src/components/DataTable/DataTableErrorBoundary.tsx
@@ -73,7 +73,7 @@ class DataTableErrorBoundaryInner extends Component<
             aria-labelledby="datatable-error-title"
             aria-describedby="datatable-error-desc"
             tabIndex={-1}
-            className="before:bg-surface-destructive/80 relative w-full max-w-md overflow-hidden rounded-lg border border-border-light bg-surface-primary-alt p-6 shadow-sm outline-none before:absolute before:left-0 before:top-0 before:h-full before:w-1 focus:ring-2 focus:ring-ring focus:ring-offset-2 dark:border-border-medium dark:bg-surface-secondary"
+            className="before:bg-surface-destructive/80 relative w-full max-w-md overflow-hidden rounded-lg border border-border-light bg-surface-primary-alt p-6 shadow-sm outline-none before:absolute before:left-0 before:top-0 before:h-full before:w-1 focus:ring-2 focus:ring-text-primary focus:ring-offset-2"
           >
             <div className="flex items-center gap-2">
               <RefreshCw className="h-4 w-4 text-surface-destructive" />
@@ -98,7 +98,7 @@ class DataTableErrorBoundaryInner extends Component<
           </div>
 
           {import.meta.env.MODE === 'development' && this.state.error && (
-            <details className="mt-4 max-w-md rounded-md bg-surface-secondary p-3 text-xs dark:bg-surface-tertiary">
+            <details className="mt-4 max-w-md rounded-md bg-surface-secondary p-3 text-xs">
               <summary className="cursor-pointer font-medium text-text-primary">
                 {this.props.localize('com_ui_error_details')}
               </summary>
diff --git a/packages/client/src/components/Dialog.tsx b/packages/client/src/components/Dialog.tsx
index c5b97cc2e6..832234227f 100644
--- a/packages/client/src/components/Dialog.tsx
+++ b/packages/client/src/components/Dialog.tsx
@@ -60,10 +60,9 @@ const DialogContent: React.ForwardRefExoticComponent<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg',
-            'dark:bg-gray-700',
+            'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-surface-dialog pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg',
             isSmallScreen
-              ? 'fixed left-1/2 top-1/2 z-[999] m-auto grid w-11/12 -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-white pb-6'
+              ? 'fixed left-1/2 top-1/2 z-[999] m-auto grid w-11/12 -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-surface-dialog pb-6'
               : '',
             disableScroll ? 'overflow-hidden' : '',
             className ?? '',
@@ -72,8 +71,8 @@ const DialogContent: React.ForwardRefExoticComponent<
         >
           {children}
           {showCloseButton && (
-            <DialogPrimitive.Close className="absolute right-6 top-[1.6rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:focus:ring-white dark:focus:ring-offset-gray-700 dark:data-[state=open]:bg-gray-800">
-              <X className="h-5 w-5 text-black dark:text-white" aria-hidden="true" />
+            <DialogPrimitive.Close className="absolute right-6 top-[1.6rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-text-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-surface-hover">
+              <X className="h-5 w-5 text-text-primary" aria-hidden="true" />
               <span className="sr-only">Close</span>
             </DialogPrimitive.Close>
           )}
@@ -90,7 +89,7 @@ const DialogHeader: {
 } = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): JSX.Element => (
   <div
     className={cn(
-      'flex flex-col space-y-2 border-b border-black/10 p-6 pb-4 text-left dark:border-white/10',
+      'flex flex-col space-y-2 border-b border-border-light p-6 pb-4 text-left',
       className ?? '',
     )}
     {...props}
@@ -118,7 +117,7 @@ const DialogTitle: React.ForwardRefExoticComponent<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold text-gray-900', 'dark:text-gray-50', className ?? '')}
+    className={cn('text-lg font-semibold text-text-primary', className ?? '')}
     {...props}
   />
 ));
@@ -133,7 +132,7 @@ const DialogDescription: React.ForwardRefExoticComponent<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-gray-500', 'dark:text-gray-400', className ?? '')}
+    className={cn('text-sm text-text-secondary', className ?? '')}
     {...props}
   />
 ));
@@ -149,10 +148,10 @@ const DialogClose: React.ForwardRefExoticComponent<
   <DialogPrimitive.Close
     ref={ref}
     className={cn(
-      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 sm:mt-0',
+      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-border-light bg-transparent px-4 py-2 text-sm font-semibold text-text-primary transition-colors hover:bg-surface-hover focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:mt-0',
       className ?? '',
       /* Important: for accessibility */
-      'focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
+      'focus:ring-2 focus:ring-text-primary focus:ring-offset-2',
     )}
     {...props}
   />
@@ -170,10 +169,10 @@ const DialogButton: React.ForwardRefExoticComponent<
     ref={ref}
     variant="outline"
     className={cn(
-      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 sm:mt-0',
+      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-border-light bg-transparent px-4 py-2 text-sm font-semibold text-text-primary transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-text-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:mt-0',
       className ?? '',
       /* Important: for accessibility */
-      'focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
+      'focus:ring-2 focus:ring-text-primary focus:ring-offset-2',
     )}
     {...props}
   />
diff --git a/packages/client/src/components/DialogTemplate.tsx b/packages/client/src/components/DialogTemplate.tsx
index 6a286cbdff..197574ba61 100644
--- a/packages/client/src/components/DialogTemplate.tsx
+++ b/packages/client/src/components/DialogTemplate.tsx
@@ -49,22 +49,20 @@ const DialogTemplate: ForwardRefExoticComponent<
   const Cancel = 'cancel';
 
   const defaultSelect =
-    'bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-200';
+    'bg-surface-inverted text-text-inverted transition-colors hover:bg-surface-inverted-hover disabled:cursor-not-allowed disabled:opacity-50';
   return (
     <DialogContent
       showCloseButton={showCloseButton}
       ref={ref}
-      className={cn('shadow-2xl dark:bg-gray-700', className || '')}
+      className={cn('bg-surface-dialog shadow-2xl', className || '')}
       onClick={(e) => e.stopPropagation()}
     >
       <DialogHeader className={cn(headerClassName ?? '')}>
-        <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
+        <DialogTitle className="text-lg font-medium leading-6 text-text-primary">
           {title}
         </DialogTitle>
         {description && (
-          <DialogDescription className="text-gray-600 dark:text-gray-300">
-            {description}
-          </DialogDescription>
+          <DialogDescription className="text-text-secondary">{description}</DialogDescription>
         )}
       </DialogHeader>
       <div className="px-6">{main ? main : null}</div>
@@ -72,7 +70,7 @@ const DialogTemplate: ForwardRefExoticComponent<
         <div>{leftButtons ? leftButtons : null}</div>
         <div className="flex h-auto gap-3">
           {showCancelButton && (
-            <DialogClose className="border-gray-100 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600">
+            <DialogClose className="border-border-light hover:bg-surface-hover">
               {Cancel}
             </DialogClose>
           )}
diff --git a/packages/client/src/components/Dropdown.tsx b/packages/client/src/components/Dropdown.tsx
index e0df3ac2c5..09811c20d9 100644
--- a/packages/client/src/components/Dropdown.tsx
+++ b/packages/client/src/components/Dropdown.tsx
@@ -137,8 +137,8 @@ const Dropdown: React.FC<DropdownProps> = ({
         store={selectProps}
         disabled={disabled}
         className={cn(
-          'focus:ring-offset-ring-offset relative inline-flex items-center justify-between rounded-xl border border-input bg-background px-3 py-2 text-sm text-text-primary transition-all duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus:ring-ring-primary',
-          'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-background disabled:hover:text-text-primary',
+          'focus:ring-offset-ring-offset relative inline-flex items-center justify-between rounded-xl border border-border-medium bg-surface-primary px-3 py-2 text-sm text-text-primary transition-all duration-200 ease-in-out hover:bg-surface-hover hover:text-text-primary focus:ring-ring-primary',
+          'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface-primary disabled:hover:text-text-primary',
           iconOnly ? 'size-10' : 'w-fit gap-2',
           className,
         )}
@@ -176,7 +176,7 @@ const Dropdown: React.FC<DropdownProps> = ({
       >
         {searchable ? (
           <>
-            <div className="sticky -top-2 z-10 -mx-2 -mt-2 mb-1 bg-surface-primary px-2 pb-1.5 pt-2 dark:bg-surface-secondary">
+            <div className="sticky -top-2 z-10 -mx-2 -mt-2 mb-1 bg-surface-primary px-2 pb-1.5 pt-2">
               <div className="relative">
                 <Search
                   className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary"
diff --git a/packages/client/src/components/DropdownMenu.tsx b/packages/client/src/components/DropdownMenu.tsx
index a73fe6e7c1..e2bca761c4 100644
--- a/packages/client/src/components/DropdownMenu.tsx
+++ b/packages/client/src/components/DropdownMenu.tsx
@@ -63,7 +63,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "data-[variant=destructive]:*:[svg]:!text-destructive outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-[variant=destructive]:*:[svg]:!text-text-destructive outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm focus:bg-surface-hover focus:text-text-primary data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-text-destructive data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-status-error-subtle data-[variant=destructive]:focus:text-text-destructive [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-text-secondary [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -81,7 +81,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm focus:bg-surface-hover focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       checked={checked}
@@ -112,7 +112,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm focus:bg-surface-hover focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -161,7 +161,7 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'spa
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      className={cn('ml-auto text-xs tracking-widest text-text-secondary', className)}
       {...props}
     />
   );
@@ -186,7 +186,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        'outline-hidden flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[inset]:pl-8 data-[state=open]:text-accent-foreground',
+        'outline-hidden flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:bg-surface-hover focus:text-text-primary data-[state=open]:bg-surface-hover data-[inset]:pl-8 data-[state=open]:text-text-primary',
         className,
       )}
       {...props}
diff --git a/packages/client/src/components/DropdownNoState.tsx b/packages/client/src/components/DropdownNoState.tsx
index a55caa3ce7..0f12bcbd8a 100644
--- a/packages/client/src/components/DropdownNoState.tsx
+++ b/packages/client/src/components/DropdownNoState.tsx
@@ -53,7 +53,7 @@ const Dropdown: FC<DropdownProps> = ({
           <ListboxButton
             data-testid={testId}
             className={cn(
-              'relative inline-flex items-center justify-between rounded-md border-gray-50 bg-white py-2 pl-3 pr-8 text-black transition-all duration-100 ease-in-out hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-white dark:focus:ring-offset-gray-700',
+              'relative inline-flex items-center justify-between rounded-md border-border-light bg-surface-secondary py-2 pl-3 pr-8 text-text-primary transition-all duration-100 ease-in-out hover:bg-surface-hover',
               'w-auto',
               className,
             )}
@@ -70,7 +70,7 @@ const Dropdown: FC<DropdownProps> = ({
                 viewBox="0 0 24 24"
                 strokeWidth="2"
                 stroke="currentColor"
-                className="h-4 w-5 rotate-0 transform text-black transition-transform duration-300 ease-in-out dark:text-gray-50"
+                className="h-4 w-5 rotate-0 transform text-text-primary transition-transform duration-300 ease-in-out"
               >
                 <polyline points="6 9 12 15 18 9"></polyline>
               </svg>
@@ -83,7 +83,7 @@ const Dropdown: FC<DropdownProps> = ({
           >
             <ListboxOptions
               className={cn(
-                'absolute z-50 mt-1 flex flex-col items-start gap-1 overflow-auto rounded-lg border border-gray-300 bg-white p-1.5 text-gray-700 shadow-lg transition-opacity focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white',
+                'absolute z-50 mt-1 flex flex-col items-start gap-1 overflow-auto rounded-lg border border-border-medium bg-surface-secondary p-1.5 text-text-primary shadow-lg transition-opacity focus:outline-none',
                 sizeClasses,
                 className,
               )}
@@ -94,7 +94,7 @@ const Dropdown: FC<DropdownProps> = ({
                   key={index}
                   value={item}
                   className={cn(
-                    'relative cursor-pointer select-none rounded border-gray-300 bg-white py-2.5 pl-3 pr-3 text-sm text-gray-700 hover:bg-gray-100 dark:border-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
+                    'relative cursor-pointer select-none rounded border-border-medium bg-surface-secondary py-2.5 pl-3 pr-3 text-sm text-text-primary hover:bg-surface-hover',
                   )}
                   style={{ width: '100%' }}
                   data-theme={getValue(item)}
diff --git a/packages/client/src/components/DropdownPopup.tsx b/packages/client/src/components/DropdownPopup.tsx
index fa628ce89f..a8bc05bc4b 100644
--- a/packages/client/src/components/DropdownPopup.tsx
+++ b/packages/client/src/components/DropdownPopup.tsx
@@ -169,7 +169,7 @@ const Menu: React.FC<MenuProps> = ({
               )}
               {item.label}
               {item.kbd != null && (
-                <kbd className="ml-auto hidden font-sans text-xs text-black/50 group-hover:inline group-focus:inline dark:text-white/50">
+                <kbd className="ml-auto hidden font-sans text-xs text-text-tertiary group-hover:inline group-focus:inline">
                   ⌘{item.kbd}
                 </kbd>
               )}
diff --git a/packages/client/src/components/FilterInput.tsx b/packages/client/src/components/FilterInput.tsx
index 273894e68d..072102d6c3 100644
--- a/packages/client/src/components/FilterInput.tsx
+++ b/packages/client/src/components/FilterInput.tsx
@@ -35,14 +35,14 @@ const FilterInput: React.ForwardRefExoticComponent<
           placeholder=" "
           aria-label={label}
           className={cn(
-            'peer flex h-9 w-full rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            'peer flex h-9 w-full rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm ring-offset-surface-primary placeholder:text-text-secondary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
             className,
           )}
           {...props}
         />
         <label
           htmlFor={inputId}
-          className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
+          className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-surface-primary peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-surface-primary peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
         >
           {label}
         </label>
diff --git a/packages/client/src/components/Input.tsx b/packages/client/src/components/Input.tsx
index 6f502e08aa..6ce88b53c4 100644
--- a/packages/client/src/components/Input.tsx
+++ b/packages/client/src/components/Input.tsx
@@ -8,7 +8,7 @@ const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HT
     return (
       <input
         className={cn(
-          'flex h-10 w-full rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm ring-offset-surface-primary placeholder:text-text-secondary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
           className ?? '',
         )}
         ref={ref}
diff --git a/packages/client/src/components/InputNumber.tsx b/packages/client/src/components/InputNumber.tsx
index 0102eb4d42..72b1a812b9 100644
--- a/packages/client/src/components/InputNumber.tsx
+++ b/packages/client/src/components/InputNumber.tsx
@@ -18,7 +18,7 @@ const InputNumber: React.ForwardRefExoticComponent<
     return (
       <RCInputNumber
         className={cn(
-          'flex max-h-5 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-50',
+          'flex max-h-5 w-full rounded-md border border-border-medium bg-transparent px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
           className ?? '',
         )}
         ref={ref}
diff --git a/packages/client/src/components/InputOTP.tsx b/packages/client/src/components/InputOTP.tsx
index 59e6454ac3..7170b4f2e7 100644
--- a/packages/client/src/components/InputOTP.tsx
+++ b/packages/client/src/components/InputOTP.tsx
@@ -109,8 +109,8 @@ const InputOTPSlot: React.ForwardRefExoticComponent<
     <div
       ref={ref}
       className={cn(
-        'text-md relative flex h-11 w-11 items-center justify-center border-y border-r border-input shadow-sm transition-all first:rounded-l-xl first:border-l last:rounded-r-xl',
-        isActive && 'z-10 ring-1 ring-ring',
+        'text-md relative flex h-11 w-11 items-center justify-center border-y border-r border-border-medium shadow-sm transition-all first:rounded-l-xl first:border-l last:rounded-r-xl',
+        isActive && 'z-10 ring-1 ring-text-primary',
         className,
       )}
       {...props}
@@ -118,7 +118,7 @@ const InputOTPSlot: React.ForwardRefExoticComponent<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+          <div className="animate-caret-blink h-4 w-px bg-text-primary duration-1000" />
         </div>
       )}
     </div>
diff --git a/packages/client/src/components/InputWithDropDown.tsx b/packages/client/src/components/InputWithDropDown.tsx
index 0af4de8721..2a73472437 100644
--- a/packages/client/src/components/InputWithDropDown.tsx
+++ b/packages/client/src/components/InputWithDropDown.tsx
@@ -97,7 +97,7 @@ const InputWithDropdown: React.ForwardRefExoticComponent<
           />
           <button
             type="button"
-            className="text-tertiary absolute inset-y-0 right-0 flex items-center rounded-md px-2 hover:text-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring-primary"
+            className="text-tertiary absolute inset-y-0 right-0 flex items-center rounded-md px-2 hover:text-text-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring-primary"
             onClick={() => setIsOpen(!isOpen)}
             aria-label={isOpen ? 'Close dropdown' : 'Open dropdown'}
           >
@@ -132,8 +132,8 @@ const InputWithDropdown: React.ForwardRefExoticComponent<
                   'cursor-pointer rounded-md px-3 py-2',
                   'focus:bg-surface-tertiary focus:outline-none focus:ring-1 focus:ring-inset focus:ring-ring-primary',
                   index === highlightedIndex
-                    ? 'bg-surface-active text-primary'
-                    : 'text-secondary hover:bg-surface-tertiary',
+                    ? 'bg-surface-active text-text-primary'
+                    : 'text-text-secondary hover:bg-surface-tertiary',
                 )}
                 onClick={() => handleSelect(option)}
                 onKeyDown={(e) => {
diff --git a/packages/client/src/components/Label.tsx b/packages/client/src/components/Label.tsx
index ef15f3051c..26c350b109 100644
--- a/packages/client/src/components/Label.tsx
+++ b/packages/client/src/components/Label.tsx
@@ -17,7 +17,7 @@ const Label: React.ForwardRefExoticComponent<
     {...props}
     {...{
       className: cn(
-        'block w-full break-all text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-200',
+        'block w-full break-all text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-primary',
         className,
       ),
     }}
diff --git a/packages/client/src/components/MultiSelect.tsx b/packages/client/src/components/MultiSelect.tsx
index 5275cb572d..6e9ffe19da 100644
--- a/packages/client/src/components/MultiSelect.tsx
+++ b/packages/client/src/components/MultiSelect.tsx
@@ -114,7 +114,7 @@ export default function MultiSelect<T extends string>({
           className={cn(
             'flex items-center justify-between gap-2 rounded-xl px-3 py-2 text-sm',
             'bg-surface-tertiary text-text-primary shadow-sm hover:cursor-pointer hover:bg-surface-hover',
-            'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white',
+            'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
             selectClassName,
             selectedValues.length > 0 && selectItemsClassName != null && selectItemsClassName,
           )}
@@ -151,7 +151,7 @@ export default function MultiSelect<T extends string>({
             const label = getItemLabel(item);
             const defaultContent = (
               <>
-                <SelectItemCheck className="mr-0.5 text-primary" />
+                <SelectItemCheck className="mr-0.5 text-text-primary" />
                 <span className="truncate">{label}</span>
               </>
             );
@@ -163,8 +163,8 @@ export default function MultiSelect<T extends string>({
                 className={cn(
                   'flex items-center gap-2 rounded-lg px-2 py-1.5 hover:cursor-pointer',
                   'scroll-m-1 outline-none transition-colors',
-                  'hover:bg-black/[0.075] dark:hover:bg-white/10',
-                  'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
+                  'hover:bg-surface-hover',
+                  'data-[active-item]:bg-surface-active',
                   'w-full min-w-0 text-sm',
                   itemClassName,
                 )}
diff --git a/packages/client/src/components/OGDialogTemplate.tsx b/packages/client/src/components/OGDialogTemplate.tsx
index 5fd9a581fe..999b3fcdc6 100644
--- a/packages/client/src/components/OGDialogTemplate.tsx
+++ b/packages/client/src/components/OGDialogTemplate.tsx
@@ -93,7 +93,7 @@ const OGDialogTemplate: ForwardRefExoticComponent<
   const { selectHandler, selectClasses, selectText, isLoading } = legacySelection ?? {};
 
   const defaultSelect =
-    'bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-200';
+    'bg-surface-inverted text-text-inverted transition-colors hover:bg-surface-inverted-hover disabled:cursor-not-allowed disabled:opacity-50';
 
   let selectionContent = null;
   if (isLegacySelection) {
@@ -121,7 +121,7 @@ const OGDialogTemplate: ForwardRefExoticComponent<
       overlayClassName={overlayClassName}
       showCloseButton={showCloseButton}
       ref={ref}
-      className={cn('w-11/12 border-none bg-background text-foreground', className ?? '')}
+      className={cn('w-11/12 border-none bg-surface-primary text-text-primary', className ?? '')}
       onClick={(e) => e.stopPropagation()}
     >
       <OGDialogHeader className={cn(headerClassName ?? '')}>
diff --git a/packages/client/src/components/OriginalDialog.tsx b/packages/client/src/components/OriginalDialog.tsx
index 70a19e3433..e29980db56 100644
--- a/packages/client/src/components/OriginalDialog.tsx
+++ b/packages/client/src/components/OriginalDialog.tsx
@@ -154,14 +154,14 @@ const DialogContent: React.ForwardRefExoticComponent<
           style={{ ...style, zIndex: contentZIndex }}
           onEscapeKeyDown={handleEscapeKeyDown}
           className={cn(
-            'max-w-11/12 fixed left-[50%] top-[50%] grid max-h-[90vh] w-full translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-2xl bg-background p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+            'max-w-11/12 fixed left-[50%] top-[50%] grid max-h-[90vh] w-full translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-2xl bg-surface-primary p-6 text-text-primary shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
             className,
           )}
           {...props}
         >
           {children}
           {showCloseButton && (
-            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-ring-primary ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-ring-primary ring-offset-surface-primary transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-text-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-surface-hover data-[state=open]:text-text-secondary">
               <X className="h-6 w-6" aria-hidden="true" />
               <span className="sr-only">Close</span>
             </DialogPrimitive.Close>
diff --git a/packages/client/src/components/Progress.tsx b/packages/client/src/components/Progress.tsx
index 64c45d45e1..0d9d7a1dfe 100644
--- a/packages/client/src/components/Progress.tsx
+++ b/packages/client/src/components/Progress.tsx
@@ -11,11 +11,14 @@ const Progress: React.ForwardRefExoticComponent<
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+    className={cn(
+      'relative h-2 w-full overflow-hidden rounded-full bg-surface-tertiary',
+      className,
+    )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-surface-inverted transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/packages/client/src/components/Radio.tsx b/packages/client/src/components/Radio.tsx
index 0115c6b9d5..b2ca067364 100644
--- a/packages/client/src/components/Radio.tsx
+++ b/packages/client/src/components/Radio.tsx
@@ -81,11 +81,11 @@ const Radio: React.NamedExoticComponent<RadioProps> = memo(function Radio({
   if (options.length === 0) {
     return (
       <div
-        className="relative inline-flex items-center rounded-lg bg-muted p-1 opacity-50"
+        className="relative inline-flex items-center rounded-lg bg-surface-tertiary p-1 opacity-50"
         role="radiogroup"
         aria-labelledby={ariaLabelledBy}
       >
-        <span className="px-4 py-2 text-xs text-muted-foreground">
+        <span className="px-4 py-2 text-xs text-text-secondary">
           {localize('com_ui_no_options')}
         </span>
       </div>
@@ -96,13 +96,13 @@ const Radio: React.NamedExoticComponent<RadioProps> = memo(function Radio({
 
   return (
     <div
-      className={`relative ${fullWidth ? 'flex' : 'inline-flex'} items-center rounded-lg bg-muted ${className}`}
+      className={`relative ${fullWidth ? 'flex' : 'inline-flex'} items-center rounded-lg bg-surface-tertiary ${className}`}
       role="radiogroup"
       aria-labelledby={ariaLabelledBy}
     >
       {selectedIndex >= 0 && isMounted && (
         <div
-          className="pointer-events-none absolute inset-y-0 rounded-md border border-border/50 bg-background shadow-sm transition-all duration-300 ease-out"
+          className="pointer-events-none absolute inset-y-0 rounded-md border border-border-light bg-surface-primary shadow-sm transition-all duration-300 ease-out"
           style={backgroundStyle}
         />
       )}
@@ -117,8 +117,8 @@ const Radio: React.NamedExoticComponent<RadioProps> = memo(function Radio({
           aria-checked={currentValue === option.value}
           onClick={() => handleChange(option.value)}
           disabled={disabled}
-          className={`relative z-10 flex h-[34px] items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-            currentValue === option.value ? 'text-foreground' : 'text-foreground'
+          className={`relative z-10 flex h-[34px] items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary ${
+            currentValue === option.value ? 'text-text-primary' : 'text-text-primary'
           } ${disabled ? 'cursor-not-allowed opacity-50' : ''} ${fullWidth ? 'flex-1' : ''} ${buttonClassName}`}
         >
           {option.icon && (
diff --git a/packages/client/src/components/Resizable.tsx b/packages/client/src/components/Resizable.tsx
index cc6eea00bb..15efa5125e 100644
--- a/packages/client/src/components/Resizable.tsx
+++ b/packages/client/src/components/Resizable.tsx
@@ -22,13 +22,13 @@ const ResizableHandle = ({
 }): JSX.Element => (
   <Separator
     className={cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
+      'relative flex w-px items-center justify-center bg-border-medium after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-text-primary focus-visible:ring-offset-1',
       className,
     )}
     {...props}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border-medium">
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
@@ -44,13 +44,13 @@ const ResizableHandleAlt = ({
 }): JSX.Element => (
   <Separator
     className={cn(
-      'group relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
+      'group relative flex w-px items-center justify-center bg-border-medium after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-text-primary focus-visible:ring-offset-1',
       className,
     )}
     {...props}
   >
     {withHandle && (
-      <div className="invisible z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border group-hover:visible group-active:visible group-data-[separator=active]:visible">
+      <div className="invisible z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border-medium group-hover:visible group-active:visible group-data-[separator=active]:visible">
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
diff --git a/packages/client/src/components/SecretInput.tsx b/packages/client/src/components/SecretInput.tsx
index ba0dda7aaf..630b7e95de 100644
--- a/packages/client/src/components/SecretInput.tsx
+++ b/packages/client/src/components/SecretInput.tsx
@@ -80,7 +80,7 @@ const SecretInput: React.ForwardRefExoticComponent<
           id={id}
           type={isVisible ? 'text' : 'password'}
           className={cn(
-            'flex h-10 w-full rounded-lg border border-border-light bg-transparent py-2 pl-3 text-sm transition-colors placeholder:text-muted-foreground hover:border-border-medium focus-visible:border-border-heavy focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-10 w-full rounded-lg border border-border-light bg-transparent py-2 pl-3 text-sm transition-colors placeholder:text-text-secondary hover:border-border-medium focus-visible:border-border-heavy focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
             className ?? '',
             copyButton != null || showCopy ? 'pr-20' : 'pr-11',
           )}
diff --git a/packages/client/src/components/Select.tsx b/packages/client/src/components/Select.tsx
index 1cdc604e44..2bcbd16fd8 100644
--- a/packages/client/src/components/Select.tsx
+++ b/packages/client/src/components/Select.tsx
@@ -26,8 +26,8 @@ const SelectTrigger: React.ForwardRefExoticComponent<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-200 border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 [&>span]:line-clamp-1',
-      'rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-700',
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border-medium bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-surface-primary placeholder:text-text-secondary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'rounded-lg hover:bg-surface-hover',
       className,
     )}
     {...props}
@@ -49,10 +49,7 @@ const SelectScrollUpButton: React.ForwardRefExoticComponent<
 >(({ className = '', ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1 dark:text-white',
-      className,
-    )}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronUpIcon />
@@ -69,10 +66,7 @@ const SelectScrollDownButton: React.ForwardRefExoticComponent<
 >(({ className = '', ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1 dark:text-white',
-      className,
-    )}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronDownIcon />
@@ -91,7 +85,7 @@ const SelectContent: React.ForwardRefExoticComponent<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-popover text-popover-foreground relative z-40 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-600',
+        'relative z-40 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border-light bg-surface-secondary text-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper'
           ? 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1'
           : '',
@@ -142,8 +136,8 @@ const SelectItem: React.ForwardRefExoticComponent<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      'rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-700',
+      'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-surface-hover focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'rounded-lg hover:bg-surface-hover',
       className,
     )}
     {...props}
@@ -167,7 +161,7 @@ const SelectSeparator: React.ForwardRefExoticComponent<
 >(({ className = '', ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-surface-tertiary', className)}
     {...props}
   />
 ));
diff --git a/packages/client/src/components/SelectDropDown.tsx b/packages/client/src/components/SelectDropDown.tsx
index c73d8856f1..a785df2f0a 100644
--- a/packages/client/src/components/SelectDropDown.tsx
+++ b/packages/client/src/components/SelectDropDown.tsx
@@ -119,13 +119,13 @@ function SelectDropDown({
                   }
                 }}
                 className={cn(
-                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-white dark:border-gray-600 dark:bg-gray-700 sm:text-sm',
+                  'relative flex w-full cursor-default flex-col rounded-md border border-border-light bg-surface-secondary py-2 pl-3 pr-10 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 disabled:bg-surface-secondary sm:text-sm',
                   className ?? '',
                 )}
               >
                 {showLabel && (
                   <Label
-                    className="block text-xs text-gray-700 dark:text-gray-500"
+                    className="block text-xs text-text-secondary"
                     id="headlessui-listbox-label-:r1:"
                     data-headlessui-state=""
                   >
@@ -135,13 +135,13 @@ function SelectDropDown({
                 <span className="inline-flex w-full truncate">
                   <span
                     className={cn(
-                      'flex h-6 items-center gap-1 truncate text-sm text-gray-800 dark:text-white',
+                      'flex h-6 items-center gap-1 truncate text-sm text-text-primary',
                       !showLabel ? 'text-xs' : '',
                       currentValueClass ?? '',
                     )}
                   >
                     {!showLabel && !emptyTitle && (
-                      <span className="text-xs text-gray-700 dark:text-gray-500">{title}:</span>
+                      <span className="text-xs text-text-secondary">{title}:</span>
                     )}
                     {renderIcon && optionIconSide !== 'right' && (
                       <span className="icon-md flex items-center">
@@ -172,7 +172,7 @@ function SelectDropDown({
                     viewBox="0 0 24 24"
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    className="h-4 w-4 text-gray-400"
+                    className="h-4 w-4 text-text-tertiary"
                     height="1em"
                     width="1em"
                     xmlns="http://www.w3.org/2000/svg"
@@ -192,7 +192,7 @@ function SelectDropDown({
               >
                 <ListboxOptions
                   className={cn(
-                    'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded border bg-white text-xs ring-black/10 dark:border-gray-600 dark:bg-gray-700 dark:ring-white/20 md:w-[100%]',
+                    'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded border border-border-light bg-surface-secondary text-xs md:w-[100%]',
                     optionsListClass ?? '',
                   )}
                 >
@@ -201,7 +201,7 @@ function SelectDropDown({
                       key={'listbox-render-option'}
                       value={null}
                       className={cn(
-                        'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden pl-3 pr-9 text-gray-800 hover:bg-gray-20 dark:text-white dark:hover:bg-gray-700',
+                        'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden pl-3 pr-9 text-text-primary hover:bg-surface-hover',
                         optionsClass ?? '',
                       )}
                     >
@@ -230,7 +230,7 @@ function SelectDropDown({
                         value={option}
                         className={({ active }) =>
                           cn(
-                            'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden pl-3 pr-9 text-gray-800 hover:bg-gray-20 dark:text-white dark:hover:bg-gray-600',
+                            'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden pl-3 pr-9 text-text-primary hover:bg-surface-hover',
                             active ? 'bg-surface-active text-text-primary' : '',
                             optionsClass ?? '',
                           )
@@ -239,7 +239,7 @@ function SelectDropDown({
                         <span className="flex items-center gap-1.5 truncate">
                           <span
                             className={cn(
-                              'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-200',
+                              'flex h-6 items-center gap-1 text-text-primary',
                               option === value ? 'font-semibold' : '',
                               iconSide === 'left' ? 'ml-4' : '',
                             )}
@@ -259,7 +259,7 @@ function SelectDropDown({
                           {currentValue === activeValue && (
                             <span
                               className={cn(
-                                'absolute inset-y-0 flex items-center text-gray-800 dark:text-gray-200',
+                                'absolute inset-y-0 flex items-center text-text-primary',
                                 iconSide === 'left' ? 'left-0 pl-2' : 'right-0 pr-3',
                               )}
                             >
diff --git a/packages/client/src/components/Slider.tsx b/packages/client/src/components/Slider.tsx
index 4cf13a5f26..dc83cccfc4 100644
--- a/packages/client/src/components/Slider.tsx
+++ b/packages/client/src/components/Slider.tsx
@@ -37,14 +37,16 @@ const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<
         }}
       >
         <SliderPrimitive.Track
-          {...{ className: 'relative h-2 w-full grow overflow-hidden rounded-full bg-secondary' }}
+          {...{
+            className: 'relative h-2 w-full grow overflow-hidden rounded-full bg-surface-tertiary',
+          }}
         >
-          <SliderPrimitive.Range {...{ className: 'absolute h-full bg-primary' }} />
+          <SliderPrimitive.Range {...{ className: 'absolute h-full bg-surface-inverted' }} />
         </SliderPrimitive.Track>
         <SliderPrimitive.Thumb
           {...{
             className:
-              'block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+              'block h-5 w-5 rounded-full border-2 border-border-xheavy bg-surface-primary ring-offset-surface-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
             'aria-labelledby': ariaLabelledBy,
             'aria-label': ariaLabel,
             'aria-describedby': ariaDescribedBy,
diff --git a/packages/client/src/components/Switch.tsx b/packages/client/src/components/Switch.tsx
index 66d1e1508c..061775085a 100644
--- a/packages/client/src/components/Switch.tsx
+++ b/packages/client/src/components/Switch.tsx
@@ -23,7 +23,7 @@ const Switch: React.ForwardRefExoticComponent<
   ({ className, ...props }, ref) => (
     <SwitchPrimitives.Root
       className={cn(
-        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-unchecked',
+        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-surface-inverted data-[state=unchecked]:bg-switch-unchecked',
         className,
       )}
       {...props}
@@ -31,7 +31,7 @@ const Switch: React.ForwardRefExoticComponent<
     >
       <SwitchPrimitives.Thumb
         className={cn(
-          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+          'pointer-events-none block h-5 w-5 rounded-full bg-surface-primary shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
         )}
       />
     </SwitchPrimitives.Root>
diff --git a/packages/client/src/components/Table.tsx b/packages/client/src/components/Table.tsx
index 662ac5bae9..df59d9cd5f 100644
--- a/packages/client/src/components/Table.tsx
+++ b/packages/client/src/components/Table.tsx
@@ -45,7 +45,7 @@ const TableFooter: React.ForwardRefExoticComponent<
   ({ className, ...props }, ref) => (
     <tfoot
       ref={ref}
-      className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+      className={cn('border-t bg-surface-tertiary font-medium [&>tr]:last:border-b-0', className)}
       {...props}
     />
   ),
@@ -59,7 +59,7 @@ const TableRow: React.ForwardRefExoticComponent<
     <tr
       ref={ref}
       className={cn(
-        'border-b border-border-light transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        'border-b border-border-light transition-colors hover:bg-surface-tertiary data-[state=selected]:bg-surface-tertiary',
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ const TableHead: React.ForwardRefExoticComponent<
     <th
       ref={ref}
       className={cn(
-        'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        'h-12 px-4 text-left align-middle font-medium text-text-secondary [&:has([role=checkbox])]:pr-0',
         className,
       )}
       {...props}
@@ -118,7 +118,7 @@ const TableCaption: React.ForwardRefExoticComponent<
   React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>
 > = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
   ({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+    <caption ref={ref} className={cn('mt-4 text-sm text-text-secondary', className)} {...props} />
   ),
 );
 TableCaption.displayName = 'TableCaption';
diff --git a/packages/client/src/components/Tabs.tsx b/packages/client/src/components/Tabs.tsx
index 81658ab072..cd7c0cbed0 100644
--- a/packages/client/src/components/Tabs.tsx
+++ b/packages/client/src/components/Tabs.tsx
@@ -33,7 +33,7 @@ const TabsTrigger: React.ForwardRefExoticComponent<
 >(({ className = '', ...props }, ref) => (
   <TabsPrimitive.Trigger
     className={cn(
-      'inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-gray-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-800 data-[state=active]:shadow-sm dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-200',
+      'inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-text-secondary transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface-primary data-[state=active]:text-text-primary data-[state=active]:shadow-sm',
       className,
     )}
     {...props}
diff --git a/packages/client/src/components/Textarea.tsx b/packages/client/src/components/Textarea.tsx
index 0ad61c8786..818ee5c6f5 100644
--- a/packages/client/src/components/Textarea.tsx
+++ b/packages/client/src/components/Textarea.tsx
@@ -11,7 +11,7 @@ const Textarea: React.ForwardRefExoticComponent<
   return (
     <textarea
       className={cn(
-        'flex h-20 w-full resize-none rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
+        'flex h-20 w-full resize-none rounded-md border border-border-medium bg-transparent px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:ring-2 focus:ring-text-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       ref={ref}
diff --git a/packages/client/src/components/ThemeSelector.tsx b/packages/client/src/components/ThemeSelector.tsx
index ebe110b58c..6b4a2aeb8a 100644
--- a/packages/client/src/components/ThemeSelector.tsx
+++ b/packages/client/src/components/ThemeSelector.tsx
@@ -36,7 +36,7 @@ const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) =
 
   return (
     <button
-      className="flex items-center gap-2 rounded-lg p-2 text-text-primary transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-0"
+      className="flex items-center gap-2 rounded-lg p-2 text-text-primary transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-2"
       aria-label={localize('com_ui_toggle_theme')}
       aria-keyshortcuts="Ctrl+Shift+T"
       onClick={(e) => {
@@ -90,7 +90,7 @@ const ThemeSelector = ({ returnThemeOnly }: { returnThemeOnly?: boolean }): JSX.
   }
 
   return (
-    <div className="flex flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+    <div className="flex flex-col items-center justify-center bg-surface-primary pt-6 sm:pt-0">
       <div className="absolute bottom-0 left-0 m-4">
         <Theme theme={theme} onChange={changeTheme} />
       </div>
diff --git a/packages/client/src/svgs/DotsIcon.tsx b/packages/client/src/svgs/DotsIcon.tsx
index 854e1448bb..ff143b8f50 100644
--- a/packages/client/src/svgs/DotsIcon.tsx
+++ b/packages/client/src/svgs/DotsIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { JSX } from 'react/jsx-runtime';
 
 export default function DotsIcon({
-  className = 'h-4 w-4 flex-shrink-0 text-gray-500',
+  className = 'h-4 w-4 flex-shrink-0 text-text-secondary',
 }: {
   className?: string;
 }): JSX.Element {
diff --git a/packages/client/src/svgs/NewChatIcon.tsx b/packages/client/src/svgs/NewChatIcon.tsx
index ac0a2537b4..1f8e03fce8 100644
--- a/packages/client/src/svgs/NewChatIcon.tsx
+++ b/packages/client/src/svgs/NewChatIcon.tsx
@@ -8,7 +8,7 @@ export default function NewChatIcon({ className = '' }: { className?: string }):
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={cn('text-black dark:text-white', className)}
+      className={cn('text-text-primary', className)}
       aria-hidden="true"
     >
       <path
diff --git a/packages/client/src/svgs/SendIcon.tsx b/packages/client/src/svgs/SendIcon.tsx
index f68ee176e9..cd17b03d18 100644
--- a/packages/client/src/svgs/SendIcon.tsx
+++ b/packages/client/src/svgs/SendIcon.tsx
@@ -14,7 +14,7 @@ export default function SendIcon({
       height={size}
       viewBox={'0 0 24 24'}
       fill="none"
-      className={cn('text-white dark:text-black', className)}
+      className={cn('text-text-inverted', className)}
       aria-hidden="true"
     >
       <path
diff --git a/packages/client/src/svgs/StopGeneratingIcon.tsx b/packages/client/src/svgs/StopGeneratingIcon.tsx
index fd3155146f..22e51dfd75 100644
--- a/packages/client/src/svgs/StopGeneratingIcon.tsx
+++ b/packages/client/src/svgs/StopGeneratingIcon.tsx
@@ -14,7 +14,7 @@ export default function StopGeneratingIcon({
       viewBox="0 0 24 24"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className={cn('h-3 w-3 text-gray-600 dark:text-gray-400', className)}
+      className={cn('h-3 w-3 text-text-secondary', className)}
       height="1em"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/client/src/theme/themes/dark.ts b/packages/client/src/theme/themes/dark.ts
index 150fee69c7..6834f3765b 100644
--- a/packages/client/src/theme/themes/dark.ts
+++ b/packages/client/src/theme/themes/dark.ts
@@ -38,6 +38,12 @@ export const darkTheme: IThemeRGB = {
   'rgb-surface-destructive': '153 27 27', // #991b1b (red-800)
   'rgb-surface-destructive-hover': '127 29 29', // #7f1d1d (red-900)
   'rgb-surface-chat': '47 47 47', // #2f2f2f (gray-700)
+  'rgb-surface-inverted': '255 255 255', // #fff (white)
+  'rgb-surface-inverted-hover': '236 236 236', // #ececec (gray-100)
+  'rgb-text-inverted': '23 23 23', // #171717 (gray-850)
+  'rgb-surface-fixed': '255 255 255', // #fff (white) — same in light + dark
+  'rgb-surface-fixed-hover': '236 236 236', // #ececec (gray-100) — same in light + dark
+  'rgb-text-fixed': '33 33 33', // #212121 (gray-800) — same in light + dark
 
   // Border colors
   'rgb-border-light': '47 47 47', // #2f2f2f (gray-700)
@@ -52,21 +58,9 @@ export const darkTheme: IThemeRGB = {
   // Presentation
   'rgb-presentation': '33 33 33', // #212121 (gray-800)
 
-  // Utility colors (mapped to existing colors for backwards compatibility)
-  'rgb-background': '33 33 33', // Same as surface-primary
-  'rgb-foreground': '255 255 255', // Same as text-primary
-  'rgb-primary': '66 66 66', // Same as surface-active
-  'rgb-primary-foreground': '255 255 255', // Same as surface-primary-contrast
-  'rgb-secondary': '42 42 42', // Same as surface-secondary
-  'rgb-secondary-foreground': '193 193 193', // Same as text-secondary
-  'rgb-muted': '56 56 56', // Same as surface-tertiary
-  'rgb-muted-foreground': '140 140 140', // Same as text-tertiary
-  'rgb-accent': '82 82 82', // Same as surface-active-alt
-  'rgb-accent-foreground': '255 255 255', // Same as text-primary
-  'rgb-destructive-foreground': '255 255 255', // Same as text-primary
-  'rgb-border': '82 82 82', // Same as border-medium
-  'rgb-input': '66 66 66', // Same as border-light
-  'rgb-ring': '255 255 255', // Same as ring-primary
-  'rgb-card': '42 42 42', // Same as surface-secondary
-  'rgb-card-foreground': '255 255 255', // Same as text-primary
+  // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
+  'rgb-background': '18 18 18', // 0 0% 7%
+  'rgb-primary': '250 250 250', // 0 0% 98%
+  'rgb-primary-foreground': '23 23 23', // 0 0% 9%
+  'rgb-ring': '212 212 212', // 0 0% 83.1%
 };
diff --git a/packages/client/src/theme/themes/default.ts b/packages/client/src/theme/themes/default.ts
index d636cc0c2e..88933800f1 100644
--- a/packages/client/src/theme/themes/default.ts
+++ b/packages/client/src/theme/themes/default.ts
@@ -38,6 +38,12 @@ export const defaultTheme: IThemeRGB = {
   'rgb-surface-destructive': '185 28 28', // #b91c1c (red-700)
   'rgb-surface-destructive-hover': '153 27 27', // #991b1b (red-800)
   'rgb-surface-chat': '255 255 255', // #fff (white)
+  'rgb-surface-inverted': '23 23 23', // #171717 (gray-850)
+  'rgb-surface-inverted-hover': '47 47 47', // #2f2f2f (gray-700)
+  'rgb-text-inverted': '255 255 255', // #fff (white)
+  'rgb-surface-fixed': '255 255 255', // #fff (white) — same in light + dark
+  'rgb-surface-fixed-hover': '236 236 236', // #ececec (gray-100) — same in light + dark
+  'rgb-text-fixed': '33 33 33', // #212121 (gray-800) — same in light + dark
 
   // Border colors
   'rgb-border-light': '227 227 227', // #e3e3e3 (gray-200)
@@ -52,21 +58,9 @@ export const defaultTheme: IThemeRGB = {
   // Presentation
   'rgb-presentation': '255 255 255', // #fff (white)
 
-  // Utility colors (mapped to existing colors for backwards compatibility)
-  'rgb-background': '255 255 255', // Same as surface-primary
-  'rgb-foreground': '17 17 17', // Same as text-primary
-  'rgb-primary': '235 235 235', // Same as surface-active
-  'rgb-primary-foreground': '0 0 0', // Same as surface-primary-contrast
-  'rgb-secondary': '247 247 248', // Same as surface-secondary
-  'rgb-secondary-foreground': '66 66 66', // Same as text-secondary
-  'rgb-muted': '250 250 250', // Same as surface-tertiary
-  'rgb-muted-foreground': '120 120 120', // Same as text-tertiary
-  'rgb-accent': '245 245 245', // Same as surface-active-alt
-  'rgb-accent-foreground': '17 17 17', // Same as text-primary
-  'rgb-destructive-foreground': '17 17 17', // Same as text-primary
-  'rgb-border': '215 215 215', // Same as border-medium
-  'rgb-input': '230 230 230', // Same as border-light
-  'rgb-ring': '180 180 180', // Same as ring-primary
-  'rgb-card': '247 247 248', // Same as surface-secondary
-  'rgb-card-foreground': '17 17 17', // Same as text-primary
+  // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
+  'rgb-background': '255 255 255', // 0 0% 100%
+  'rgb-primary': '23 23 23', // 0 0% 9%
+  'rgb-primary-foreground': '250 250 250', // 0 0% 98%
+  'rgb-ring': '10 10 10', // 0 0% 3.9%
 };
diff --git a/packages/client/src/theme/types/index.ts b/packages/client/src/theme/types/index.ts
index 47ab88d6b8..233bb6aad2 100644
--- a/packages/client/src/theme/types/index.ts
+++ b/packages/client/src/theme/types/index.ts
@@ -36,6 +36,12 @@ export interface IThemeRGB {
   'rgb-surface-destructive'?: string;
   'rgb-surface-destructive-hover'?: string;
   'rgb-surface-chat'?: string;
+  'rgb-surface-inverted'?: string;
+  'rgb-surface-inverted-hover'?: string;
+  'rgb-text-inverted'?: string;
+  'rgb-surface-fixed'?: string;
+  'rgb-surface-fixed-hover'?: string;
+  'rgb-text-fixed'?: string;
 
   // Border colors
   'rgb-border-light'?: string;
@@ -50,23 +56,11 @@ export interface IThemeRGB {
   // Presentation
   'rgb-presentation'?: string;
 
-  // Utility colors
+  // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
   'rgb-background'?: string;
-  'rgb-foreground'?: string;
   'rgb-primary'?: string;
   'rgb-primary-foreground'?: string;
-  'rgb-secondary'?: string;
-  'rgb-secondary-foreground'?: string;
-  'rgb-muted'?: string;
-  'rgb-muted-foreground'?: string;
-  'rgb-accent'?: string;
-  'rgb-accent-foreground'?: string;
-  'rgb-destructive-foreground'?: string;
-  'rgb-border'?: string;
-  'rgb-input'?: string;
   'rgb-ring'?: string;
-  'rgb-card'?: string;
-  'rgb-card-foreground'?: string;
 }
 
 /**
@@ -99,6 +93,12 @@ export interface IThemeVariables {
   '--surface-destructive': string;
   '--surface-destructive-hover': string;
   '--surface-chat': string;
+  '--surface-inverted': string;
+  '--surface-inverted-hover': string;
+  '--text-inverted': string;
+  '--surface-fixed': string;
+  '--surface-fixed-hover': string;
+  '--text-fixed': string;
   '--border-light': string;
   '--border-medium': string;
   '--border-medium-alt': string;
@@ -107,23 +107,11 @@ export interface IThemeVariables {
   '--brand-purple': string;
   '--presentation': string;
 
-  // Utility variables
+  // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
   '--background': string;
-  '--foreground': string;
   '--primary': string;
   '--primary-foreground': string;
-  '--secondary': string;
-  '--secondary-foreground': string;
-  '--muted': string;
-  '--muted-foreground': string;
-  '--accent': string;
-  '--accent-foreground': string;
-  '--destructive-foreground': string;
-  '--border': string;
-  '--input': string;
   '--ring': string;
-  '--card': string;
-  '--card-foreground': string;
 }
 
 /**
@@ -156,6 +144,12 @@ export interface IThemeColors {
   'surface-destructive'?: string;
   'surface-destructive-hover'?: string;
   'surface-chat'?: string;
+  'surface-inverted'?: string;
+  'surface-inverted-hover'?: string;
+  'text-inverted'?: string;
+  'surface-fixed'?: string;
+  'surface-fixed-hover'?: string;
+  'text-fixed'?: string;
   'border-light'?: string;
   'border-medium'?: string;
   'border-medium-alt'?: string;
@@ -164,23 +158,11 @@ export interface IThemeColors {
   'brand-purple'?: string;
   presentation?: string;
 
-  // Utility colors
+  // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
   background?: string;
-  foreground?: string;
   primary?: string;
   'primary-foreground'?: string;
-  secondary?: string;
-  'secondary-foreground'?: string;
-  muted?: string;
-  'muted-foreground'?: string;
-  accent?: string;
-  'accent-foreground'?: string;
-  'destructive-foreground'?: string;
-  border?: string;
-  input?: string;
   ring?: string;
-  card?: string;
-  'card-foreground'?: string;
 }
 
 export interface Theme {
diff --git a/packages/client/src/theme/utils/applyTheme.ts b/packages/client/src/theme/utils/applyTheme.ts
index b3fc4514b8..93f95443e8 100644
--- a/packages/client/src/theme/utils/applyTheme.ts
+++ b/packages/client/src/theme/utils/applyTheme.ts
@@ -52,6 +52,12 @@ function mapTheme(rgb: IThemeRGB): Partial<IThemeVariables> {
     'rgb-surface-destructive': '--surface-destructive',
     'rgb-surface-destructive-hover': '--surface-destructive-hover',
     'rgb-surface-chat': '--surface-chat',
+    'rgb-surface-inverted': '--surface-inverted',
+    'rgb-surface-inverted-hover': '--surface-inverted-hover',
+    'rgb-text-inverted': '--text-inverted',
+    'rgb-surface-fixed': '--surface-fixed',
+    'rgb-surface-fixed-hover': '--surface-fixed-hover',
+    'rgb-text-fixed': '--text-fixed',
     'rgb-border-light': '--border-light',
     'rgb-border-medium': '--border-medium',
     'rgb-border-medium-alt': '--border-medium-alt',
@@ -60,23 +66,11 @@ function mapTheme(rgb: IThemeRGB): Partial<IThemeVariables> {
     'rgb-brand-purple': '--brand-purple',
     'rgb-presentation': '--presentation',
 
-    // Utility colors
+    // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
     'rgb-background': '--background',
-    'rgb-foreground': '--foreground',
     'rgb-primary': '--primary',
     'rgb-primary-foreground': '--primary-foreground',
-    'rgb-secondary': '--secondary',
-    'rgb-secondary-foreground': '--secondary-foreground',
-    'rgb-muted': '--muted',
-    'rgb-muted-foreground': '--muted-foreground',
-    'rgb-accent': '--accent',
-    'rgb-accent-foreground': '--accent-foreground',
-    'rgb-destructive-foreground': '--destructive-foreground',
-    'rgb-border': '--border',
-    'rgb-input': '--input',
     'rgb-ring': '--ring',
-    'rgb-card': '--card',
-    'rgb-card-foreground': '--card-foreground',
   };
 
   Object.entries(mappings).forEach(([rgbKey, cssVar]) => {
diff --git a/packages/client/src/theme/utils/createTailwindColors.js b/packages/client/src/theme/utils/createTailwindColors.js
index 93650c6459..2f014201fa 100644
--- a/packages/client/src/theme/utils/createTailwindColors.js
+++ b/packages/client/src/theme/utils/createTailwindColors.js
@@ -99,6 +99,12 @@ function createTailwindColors() {
     'surface-destructive': cssVar('--surface-destructive'),
     'surface-destructive-hover': cssVar('--surface-destructive-hover'),
     'surface-chat': cssVar('--surface-chat'),
+    'surface-inverted': cssVar('--surface-inverted'),
+    'surface-inverted-hover': cssVar('--surface-inverted-hover'),
+    'text-inverted': cssVar('--text-inverted'),
+    'surface-fixed': cssVar('--surface-fixed'),
+    'surface-fixed-hover': cssVar('--surface-fixed-hover'),
+    'text-fixed': cssVar('--text-fixed'),
 
     'border-light': cssVar('--border-light'),
     'border-medium': cssVar('--border-medium'),
@@ -123,36 +129,15 @@ function createTailwindColors() {
     'status-neutral-subtle': cssVar('--status-neutral-subtle'),
     'status-neutral-border': cssVar('--status-neutral-border'),
 
-    border: hslVar('--border'),
-    input: hslVar('--input'),
     'switch-unchecked': hslVar('--switch-unchecked'),
-    ring: hslVar('--ring'),
+
+    // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
     background: hslVar('--background'),
-    foreground: hslVar('--foreground'),
+    ring: hslVar('--ring'),
     primary: {
       DEFAULT: hslVar('--primary'),
       foreground: hslVar('--primary-foreground'),
     },
-    secondary: {
-      DEFAULT: hslVar('--secondary'),
-      foreground: hslVar('--secondary-foreground'),
-    },
-    destructive: {
-      DEFAULT: hslVar('--destructive'),
-      foreground: hslVar('--destructive-foreground'),
-    },
-    muted: {
-      DEFAULT: hslVar('--muted'),
-      foreground: hslVar('--muted-foreground'),
-    },
-    accent: {
-      DEFAULT: hslVar('--accent'),
-      foreground: hslVar('--accent-foreground'),
-    },
-    card: {
-      DEFAULT: hslVar('--card'),
-      foreground: hslVar('--card-foreground'),
-    },
   };
 }