refactor(client): remove residual shadcn color tokens

The background/primary/primary-foreground/ring and unused chart-* tokens were
retained only for the then-unmigrated Agent Builder. With that panel migrated,
replace the last usages with LibreChat semantic tokens (ring-primary/ring-ring
-> ring-text-primary; bg-primary/text-primary-foreground -> bg-surface-inverted
/text-text-inverted; text-primary -> text-text-primary; bg-background ->
bg-surface-primary) and drop the token definitions from createTailwindColors,
applyTheme, the theme objects, types, and style.css.

client/src/components/Agents/AgentContact.tsx

@@ -27,7 +27,7 @@ export default function AgentContact({ agent, className = '' }: AgentContactProp
       <span className="shrink-0">{localize('com_agents_contact')}:</span>
       <span className="min-w-0 truncate">
         {contact?.email ? (
-          <a href={`mailto:${contact.email}`} className="text-primary hover:underline">
+          <a href={`mailto:${contact.email}`} className="text-text-primary hover:underline">
             {label}
           </a>
         ) : (

client/src/components/Bookmarks/BookmarkItem.tsx

@@ -49,7 +49,7 @@ const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ..
   return (
     <MenuItem
       aria-label={tag as string}
-      className="group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200 focus:outline-none data-[focus]:bg-surface-hover data-[focus-visible]:ring-2 data-[focus-visible]:ring-primary"
+      className="group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200 focus:outline-none data-[focus]:bg-surface-hover data-[focus-visible]:ring-2 data-[focus-visible]:ring-text-primary"
       {...rest}
       as="button"
       onClick={clickHandler}

client/src/components/Chat/Input/CollapseChat.tsx

@@ -37,7 +37,7 @@ const CollapseChat = ({
             className={cn(
               // 'absolute right-1.5 top-1.5',
               'z-10 size-5 rounded-full transition-colors',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-50',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-opacity-50',
             )}
           >
             {isCollapsed ? (

client/src/components/Chat/Input/Files/AttachFile.tsx

@@ -45,7 +45,7 @@ const AttachFile = ({
             aria-keyshortcuts={ariaKey}
             disabled={isUploadDisabled}
             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-primary focus-visible:ring-opacity-50',
+              '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-text-primary focus-visible:ring-opacity-50',
             )}
             onKeyDownCapture={(e) => {
               if (!inputRef.current) {

client/src/components/Chat/Input/Files/AttachFileMenu.tsx

@@ -282,7 +282,7 @@ const AttachFileMenu = ({
           aria-label="Attach File Options"
           aria-keyshortcuts={uploadFileAriaKey}
           className={cn(
-            'flex size-9 items-center justify-center rounded-full p-1 hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-50',
+            'flex size-9 items-center justify-center rounded-full p-1 hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-opacity-50',
             isPopoverActive && 'bg-surface-hover',
           )}
         >

client/src/components/Chat/Input/ToolsDropdown.tsx

@@ -379,7 +379,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
           id="tools-dropdown-button"
           aria-label="Tools Options"
           className={cn(
-            'flex size-9 items-center justify-center rounded-full p-1 hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-50',
+            'flex size-9 items-center justify-center rounded-full p-1 hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-opacity-50',
             isPopoverActive && 'bg-surface-hover',
           )}
         >

client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx

@@ -84,7 +84,7 @@ export const CustomMenu = React.forwardRef<HTMLDivElement, CustomMenuProps>(func
                     className={cn(
                       'peer flex h-10 w-full items-center justify-center rounded-lg border-none bg-transparent px-2 text-base',
                       'sm:h-8 sm:text-sm',
-                      'focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-primary',
+                      'focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-text-primary',
                     )}
                   />
                   {comboboxLabel && (

client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx

@@ -60,7 +60,7 @@ const SettingsButton = ({
         'text-text-secondary transition-colors duration-150',
         'hover:bg-surface-tertiary hover:text-text-primary',
         'focus-visible:bg-surface-tertiary focus-visible:text-text-primary',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-1',
         className,
       )}
       aria-label={`${text} ${endpoint.label}`}

client/src/components/Nav/KeyboardShortcutsDialog.tsx

@@ -135,7 +135,7 @@ function ShortcutRow({
           <button
             type="button"
             onClick={() => resetBinding(info.id)}
-            className="text-[11.5px] text-text-secondary opacity-0 transition-opacity hover:text-text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
+            className="text-[11.5px] text-text-secondary opacity-0 transition-opacity hover:text-text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary group-hover:opacity-100"
           >
             {localize('com_shortcut_reset')}
           </button>
@@ -146,7 +146,7 @@ function ShortcutRow({
             onClick={() => onStartEdit(info.id)}
             aria-label={editAriaLabel}
             data-testid={`edit-shortcut-${info.id}`}
-            className="inline-flex h-[22px] items-center gap-1 rounded-md border border-dashed border-border-medium bg-transparent px-2 text-[11px] font-medium text-text-secondary transition-colors hover:border-border-heavy hover:bg-surface-tertiary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-surface-secondary-alt"
+            className="inline-flex h-[22px] items-center gap-1 rounded-md border border-dashed border-border-medium bg-transparent px-2 text-[11px] font-medium text-text-secondary transition-colors hover:border-border-heavy hover:bg-surface-tertiary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary dark:hover:bg-surface-secondary-alt"
           >
             <Plus className="h-3 w-3" aria-hidden="true" />
             {localize('com_shortcut_set')}
@@ -157,7 +157,7 @@ function ShortcutRow({
             onClick={() => onStartEdit(info.id)}
             aria-label={editAriaLabel}
             data-testid={`edit-shortcut-${info.id}`}
-            className="rounded-md px-1 py-0.5 transition-colors hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-surface-secondary-alt"
+            className="rounded-md px-1 py-0.5 transition-colors hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary dark:hover:bg-surface-secondary-alt"
           >
             <ShortcutKeyCombo keys={displayKeys} />
           </button>
@@ -239,7 +239,7 @@ function PanelsSection({
         <h3 className="text-[12px] font-medium text-text-secondary">
           {localize('com_shortcut_group_panels')}
         </h3>
-        <p className="text-text-secondary/80 text-[11.5px]">
+        <p className="text-[11.5px] text-text-secondary/80">
           {localize('com_shortcut_group_panels_hint')}
         </p>
       </div>
@@ -329,7 +329,7 @@ function KeyboardShortcutsDialog() {
           <OGDialogTitle className="text-[16px] font-semibold text-text-primary">
             {localize('com_shortcut_keyboard_shortcuts')}
           </OGDialogTitle>
-          <OGDialogClose className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-surface-secondary-alt">
+          <OGDialogClose className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary dark:hover:bg-surface-secondary-alt">
             <X className="h-4 w-4" />
             <span className="sr-only">{localize('com_ui_close')}</span>
           </OGDialogClose>
@@ -389,7 +389,7 @@ function KeyboardShortcutsDialog() {
             <button
               type="button"
               onClick={resetAll}
-              className="text-[12px] text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="text-[12px] text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary"
             >
               {localize('com_shortcut_reset_all')}
             </button>

client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx

@@ -144,7 +144,7 @@ const BackupCodesItem: React.FC = () => {
                           });
                           document.dispatchEvent(announcement);
                         }}
-                        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 ${
+                        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-text-primary ${
                           isUsed
                             ? 'border-status-error-border bg-status-error-subtle'
                             : 'border-status-success-border bg-status-success-subtle'

client/src/components/Nav/SettingsTabs/ProviderKeys/ProviderKeys.tsx

@@ -32,7 +32,7 @@ export default function ProviderKeys() {
           </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">

client/src/components/Nav/ShortcutRecorder.tsx

@@ -183,7 +183,7 @@ export function RecorderPill({
       onKeyUp={onKeyUp}
       className={cn(
         'flex h-[30px] items-center gap-1.5 rounded-md border bg-surface-primary px-2 outline-none transition-colors',
-        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface-primary-alt',
+        'focus-visible:ring-2 focus-visible:ring-text-primary focus-visible:ring-offset-1 focus-visible:ring-offset-surface-primary-alt',
         stateBorder,
       )}
     >

client/src/components/SidePanel/Agents/MCPToolItem.tsx

@@ -53,7 +53,7 @@ export default function MCPToolItem({
             aria-hidden="true"
             className={cn(
               'flex size-4 shrink-0 items-center justify-center rounded border border-border-medium transition-colors',
-              isSelected && 'bg-primary text-primary-foreground',
+              isSelected && 'bg-surface-inverted text-text-inverted',
             )}
           >
             {isSelected && <Check className="size-4" />}

client/src/style.css

@@ -207,17 +207,7 @@ html {
   --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%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --ring: 0 0% 3.9%;
   --radius: 0.5rem;
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
   --switch-unchecked: 0 0% 58%;
 }
 .dark {
@@ -282,16 +272,6 @@ html {
   --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%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --ring: 0 0% 83.1%;
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
   --switch-unchecked: 0 0% 40%;
 }
 .gizmo {

packages/client/src/theme/themes/dark.ts

@@ -57,10 +57,4 @@ export const darkTheme: IThemeRGB = {
 
   // Presentation
   'rgb-presentation': '33 33 33', // #212121 (gray-800)
-
-  // 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%
 };

packages/client/src/theme/themes/default.ts

@@ -57,10 +57,4 @@ export const defaultTheme: IThemeRGB = {
 
   // Presentation
   'rgb-presentation': '255 255 255', // #fff (white)
-
-  // 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%
 };

packages/client/src/theme/types/index.ts

@@ -55,12 +55,6 @@ export interface IThemeRGB {
 
   // Presentation
   'rgb-presentation'?: string;
-
-  // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
-  'rgb-background'?: string;
-  'rgb-primary'?: string;
-  'rgb-primary-foreground'?: string;
-  'rgb-ring'?: string;
 }
 
 /**
@@ -106,12 +100,6 @@ export interface IThemeVariables {
   '--border-xheavy': string;
   '--brand-purple': string;
   '--presentation': string;
-
-  // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
-  '--background': string;
-  '--primary': string;
-  '--primary-foreground': string;
-  '--ring': string;
 }
 
 /**

packages/client/src/theme/utils/applyTheme.ts

@@ -65,12 +65,6 @@ function mapTheme(rgb: IThemeRGB): Partial<IThemeVariables> {
     'rgb-border-xheavy': '--border-xheavy',
     'rgb-brand-purple': '--brand-purple',
     'rgb-presentation': '--presentation',
-
-    // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
-    'rgb-background': '--background',
-    'rgb-primary': '--primary',
-    'rgb-primary-foreground': '--primary-foreground',
-    'rgb-ring': '--ring',
   };
 
   Object.entries(mappings).forEach(([rgbKey, cssVar]) => {

packages/client/src/theme/utils/createTailwindColors.js

@@ -129,14 +129,6 @@ function createTailwindColors() {
     'status-neutral-border': cssVar('--status-neutral-border'),
 
     'switch-unchecked': hslVar('--switch-unchecked'),
-
-    // Retained for excluded SidePanel/Agents + SidePanel/Builder (pending migration)
-    background: hslVar('--background'),
-    ring: hslVar('--ring'),
-    primary: {
-      DEFAULT: hslVar('--primary'),
-      foreground: hslVar('--primary-foreground'),
-    },
   };
 }