refactor: tokenize Chat message content, tool output, and file UI colors

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

@@ -16,8 +16,8 @@ const Image = ({
   source?: FileSources;
 }) => {
   return (
-    <div className="group relative inline-block text-sm text-black/70 dark:text-white/90">
-      <div className="relative overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-600">
+    <div className="group relative inline-block text-sm text-text-secondary">
+      <div className="relative overflow-hidden rounded-2xl border border-border-medium">
         <ImagePreview source={source} imageBase64={imageBase64} url={url} progress={progress} />
       </div>
       <RemoveFile onRemove={onDelete} />

client/src/components/Chat/Input/Files/Table/DataTable.tsx

@@ -110,7 +110,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           {isDeleting ? (
             <Spinner className="size-3.5 sm: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">{localize('com_ui_delete')}</span>}
         </Button>

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

@@ -209,7 +209,7 @@ function PromptsCommand({
           <input
             ref={initInputRef}
             placeholder={localize('com_ui_command_usage_placeholder')}
-            className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm focus:outline-none dark:text-gray-200"
+            className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm text-text-primary focus:outline-none"
             autoComplete="off"
             value={searchValue}
             onKeyDown={(e) => {

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

@@ -295,7 +295,7 @@ function SkillsCommandContent({
         <input
           ref={initInputRef}
           placeholder={localize('com_ui_skills_command_placeholder')}
-          className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm focus:outline-none dark:text-gray-200"
+          className="mb-1 w-full border-0 bg-surface-tertiary-alt p-2 text-sm text-text-primary focus:outline-none"
           autoComplete="off"
           value={searchValue}
           onKeyDown={(e) => {

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

@@ -33,7 +33,7 @@ const GroupIcon: React.FC<GroupIconProps> = ({ iconURL, groupName }) => {
         </div>
         {imageError && iconURL && (
           <div
-            className="absolute flex items-center justify-center rounded-full bg-red-500"
+            className="absolute flex items-center justify-center rounded-full bg-surface-destructive"
             style={{ width: '14px', height: '14px', top: 0, right: 0 }}
           >
             <AlertCircle size={10} className="text-white" />

client/src/components/Chat/Messages/Content/MemoryArtifacts.tsx

@@ -89,7 +89,7 @@ export default function MemoryArtifacts({ attachments }: { attachments?: TAttach
             className={cn(
               'outline-hidden my-1 flex items-center gap-1 text-sm font-semibold transition-colors',
               hasErrors
-                ? 'text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500'
+                ? 'text-status-error'
                 : 'text-text-secondary-alt hover:text-text-primary',
             )}
             type="button"

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-gray-100">
+    <div className="markdown prose dark:prose-invert light w-full break-words dark:text-text-primary">
       <div className="absolute">
         <p className="submitting relative">
           <span className="result-thinking" />
@@ -49,7 +49,7 @@ const ErrorBox = ({
     role="alert"
     aria-live="assertive"
     className={cn(
-      'rounded-xl border border-red-500/20 bg-red-500/5 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
+      'rounded-xl border border-status-error-border bg-status-error-subtle px-3 py-2 text-sm text-text-secondary',
       className,
     )}
   >

client/src/components/Chat/Messages/Content/Parts/BashCall.tsx

@@ -106,7 +106,7 @@ export default function BashCall({
                 <pre
                   className={cn(
                     'max-h-[300px] overflow-auto whitespace-pre-wrap break-words px-3 py-2.5 font-mono text-xs',
-                    outputHasError ? 'text-red-600 dark:text-red-400' : 'text-text-primary',
+                    outputHasError ? 'text-status-error' : 'text-text-primary',
                   )}
                 >
                   {output}

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-gray-100">
+      <div className="markdown prose dark:prose-invert light w-full break-words dark:text-text-primary">
         <div className="absolute">
           <p className="submitting relative">
             <span className="result-thinking" />

client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx

@@ -123,7 +123,7 @@ export default function ExecuteCode({
                 <div
                   className={cn(
                     'max-h-[200px] overflow-auto',
-                    outputHasError ? 'text-red-600 dark:text-red-400' : 'text-text-primary',
+                    outputHasError ? 'text-status-error' : 'text-text-primary',
                   )}
                 >
                   <Stdout output={output} />

client/src/components/Chat/Messages/Content/Parts/FileAuthoringCall.tsx

@@ -197,7 +197,7 @@ export default function FileAuthoringCall({
                 <pre
                   className={cn(
                     'max-h-[300px] overflow-auto whitespace-pre-wrap break-words border-t border-border-light px-3 py-2.5 font-mono text-xs',
-                    hasError ? 'text-red-600 dark:text-red-400' : 'text-text-primary',
+                    hasError ? 'text-status-error' : 'text-text-primary',
                   )}
                 >
                   {output}

client/src/components/Chat/Messages/Content/Parts/SubagentCall.tsx

@@ -658,7 +658,7 @@ function SubagentPrompt({
           expanded ? 'overflow-visible' : 'max-h-32 overflow-hidden',
         )}
       >
-        <div className="markdown prose prose-sm message-content light dark:prose-invert w-full max-w-none break-words text-text-primary dark:text-gray-100">
+        <div className="markdown prose prose-sm message-content light dark:prose-invert w-full max-w-none break-words text-text-primary">
           <MarkdownLite content={prompt} codeExecution={false} />
         </div>
         {!expanded && (

client/src/components/Chat/Messages/Content/ProgressText.tsx

@@ -101,7 +101,7 @@ export default function ProgressText({
         <span className={cn(showShimmer ? 'shimmer' : '', 'font-medium')}>{text}</span>
         {subtitle && <span className="font-normal text-text-secondary">{subtitle}</span>}
         {errorSuffix && (
-          <span className="font-normal text-red-600 dark:text-red-400">— {errorSuffix}</span>
+          <span className="font-normal text-status-error">— {errorSuffix}</span>
         )}
         {hasInput && (
           <ChevronDown

client/src/components/Chat/Messages/Content/ToolOutput/OutputRenderer.tsx

@@ -124,7 +124,7 @@ export default function OutputRenderer({ text }: OutputRendererProps) {
         <pre
           className={cn(
             'max-h-[300px] overflow-auto whitespace-pre-wrap break-words text-xs',
-            error && 'font-mono text-red-600 dark:text-red-400',
+            error && 'font-mono text-status-error',
             !error && structured && 'font-mono text-text-secondary',
             !error && !structured && 'font-sans text-sm text-text-primary',
           )}
@@ -159,7 +159,7 @@ export default function OutputRenderer({ text }: OutputRendererProps) {
         </button>
       )}
       {showErrorDetails && rawError && (
-        <pre className="mt-2 max-h-[200px] overflow-auto whitespace-pre-wrap break-words font-mono text-xs text-red-600 dark:text-red-400">
+        <pre className="mt-2 max-h-[200px] overflow-auto whitespace-pre-wrap break-words font-mono text-xs text-status-error">
           {rawError}
         </pre>
       )}

client/src/components/Chat/Messages/MinimalHoverButtons.tsx

@@ -18,7 +18,7 @@ export default function MinimalHoverButtons({ message, searchResults }: THoverBu
   });
 
   return (
-    <div className="visible mt-1 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">
+    <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"
         onClick={() => copyToClipboard(setIsCopied)}