refactor: tokenize OAuth, Share, ui, Bookmarks, Tools, Messages, Web, SharePoint colors

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -119,7 +119,7 @@ const BookmarkForm = ({
             aria-describedby={errors.tag ? 'bookmark-tag-error' : undefined}
           />
           {errors.tag && (
-            <span id="bookmark-tag-error" role="alert" className="text-sm text-red-500">
+            <span id="bookmark-tag-error" role="alert" className="text-sm text-text-destructive">
               {errors.tag.message}
             </span>
           )}

client/src/components/Bookmarks/DeleteBookmarkButton.tsx

@@ -74,8 +74,7 @@ const DeleteBookmarkButton: FC<{
           }
           selection={{
             selectHandler: confirmDelete,
-            selectClasses:
-              'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
+            selectClasses: 'bg-surface-destructive hover:bg-surface-destructive-hover text-white',
             selectText: localize('com_ui_delete'),
           }}
         />

client/src/components/MCPUIResource/MCPUIResource.tsx

@@ -26,7 +26,7 @@ export function MCPUIResource(props: MCPUIResourceProps) {
 
   if (!uiResource) {
     return (
-      <span className="inline-flex items-center rounded bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600">
+      <span className="inline-flex items-center rounded bg-surface-tertiary px-2 py-1 text-xs font-medium text-text-secondary">
         {localize('com_ui_ui_resource_not_found', {
           0: resourceId ?? '',
         })}
@@ -50,7 +50,7 @@ export function MCPUIResource(props: MCPUIResourceProps) {
   } catch (error) {
     console.error('Error rendering UI resource:', error);
     return (
-      <span className="inline-flex items-center rounded bg-red-50 px-2 py-1 text-xs font-medium text-red-600">
+      <span className="inline-flex items-center rounded bg-status-error-subtle px-2 py-1 text-xs font-medium text-status-error">
         {localize('com_ui_ui_resource_error', { 0: uiResource.name || resourceId })}
       </span>
     );

client/src/components/Messages/Content/Mermaid/Mermaid.tsx

@@ -175,7 +175,7 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
         <MermaidHeader codeContent={children} showCode={showCode} onToggleCode={handleToggleCode} />
         <div className="border-t border-border-light bg-surface-tertiary p-4">
           <div className="mb-2 flex items-center justify-between">
-            <span className="font-semibold text-red-600 dark:text-red-400">
+            <span className="font-semibold text-text-destructive">
               {localize('com_ui_mermaid_failed')}
             </span>
             <button
@@ -187,7 +187,7 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
               {localize('com_ui_retry')}
             </button>
           </div>
-          <pre className="overflow-auto text-xs text-red-600 dark:text-red-300">
+          <pre className="overflow-auto text-xs text-text-destructive">
             {error.message}
           </pre>
           {showCode && (

client/src/components/OAuth/OAuthError.tsx

@@ -35,12 +35,12 @@ export default function OAuthError() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-8">
-      <div className="w-full max-w-md rounded-lg bg-white p-8 text-center shadow-lg">
+    <div className="flex min-h-screen items-center justify-center bg-surface-secondary p-8">
+      <div className="w-full max-w-md rounded-lg bg-surface-primary p-8 text-center shadow-lg">
         <div className="mb-4 flex justify-center">
-          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-status-error-subtle">
             <svg
-              className="h-6 w-6 text-red-600"
+              className="h-6 w-6 text-status-error"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -55,13 +55,13 @@ export default function OAuthError() {
             </svg>
           </div>
         </div>
-        <h1 className="mb-4 text-3xl font-bold text-gray-900">
+        <h1 className="mb-4 text-3xl font-bold text-text-primary">
           {localize('com_ui_oauth_error_title') || 'Authentication Failed'}
         </h1>
-        <p className="mb-6 text-sm text-gray-600">{getErrorMessage(error)}</p>
+        <p className="mb-6 text-sm text-text-secondary">{getErrorMessage(error)}</p>
         <button
           onClick={() => window.close()}
-          className="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+          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"
           aria-label={localize('com_ui_close_window') || 'Close Window'}
         >
           {localize('com_ui_close_window') || 'Close Window'}

client/src/components/OAuth/OAuthSuccess.tsx

@@ -24,19 +24,19 @@ export default function OAuthSuccess() {
   }, []);
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-8">
-      <div className="w-full max-w-md rounded-xl bg-white p-8 text-center shadow-lg">
-        <h1 className="mb-4 text-3xl font-bold text-gray-900">
+    <div className="flex min-h-screen items-center justify-center bg-surface-secondary p-8">
+      <div className="w-full max-w-md rounded-xl bg-surface-primary p-8 text-center shadow-lg">
+        <h1 className="mb-4 text-3xl font-bold text-text-primary">
           {localize('com_ui_oauth_success_title') || 'Authentication Successful'}
         </h1>
-        <p className="mb-2 text-sm text-gray-600">
+        <p className="mb-2 text-sm text-text-secondary">
           {localize('com_ui_oauth_success_description') ||
             'Your authentication was successful. This window will close in'}{' '}
           <span className="font-medium text-indigo-500">{secondsLeft}</span>{' '}
           {localize('com_ui_seconds') || 'seconds'}.
         </p>
         {serverName && (
-          <p className="mt-4 text-xs text-gray-500">
+          <p className="mt-4 text-xs text-text-tertiary">
             {localize('com_ui_oauth_connected_to') || 'Connected to'}:{' '}
             <span className="font-medium">{serverName}</span>
           </p>

client/src/components/Share/MessagesView.tsx

@@ -24,7 +24,7 @@ export default function MessagesView({
         >
           <div className="flex flex-col pb-16 text-sm dark:bg-transparent">
             {(_messagesTree && _messagesTree.length === 0) || _messagesTree === null ? (
-              <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
+              <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">
                 {localize('com_ui_nothing_found')}
               </div>
             ) : (

client/src/components/SharePoint/SharePointPickerDialog.tsx

@@ -112,7 +112,7 @@ export default function SharePointPickerDialog({
                           })}
                         </p>
                         {downloadProgress.failed.length > 0 && (
-                          <p className="text-xs text-red-500">
+                          <p className="text-xs text-text-destructive">
                             {localize('com_files_download_failed', {
                               0: downloadProgress.failed.length,
                             })}

client/src/components/Web/Sources.tsx

@@ -319,7 +319,7 @@ const FileItem = React.memo(function FileItem({
             </span>
           )}
         </div>
-        {error && <div className="mt-1 text-xs text-red-500">{getErrorMessage(error)}</div>}
+        {error && <div className="mt-1 text-xs text-text-destructive">{getErrorMessage(error)}</div>}
       </button>
     );
   }
@@ -353,7 +353,7 @@ const FileItem = React.memo(function FileItem({
           </span>
         )}
       </div>
-      {error && <div className="mt-1 text-xs text-red-500">{getErrorMessage(error)}</div>}
+      {error && <div className="mt-1 text-xs text-text-destructive">{getErrorMessage(error)}</div>}
     </button>
   );
 });

client/src/components/ui/AdminSettingsDialog.tsx

@@ -221,7 +221,7 @@ const AdminSettingsDialog: React.FC<AdminSettingsDialogProps> = ({
                     {showAdminWarning &&
                       selectedRole === SystemRoles.ADMIN &&
                       permission === Permissions.USE && (
-                        <div className="mb-2 max-w-full whitespace-normal break-words text-sm text-red-600">
+                        <div className="mb-2 max-w-full whitespace-normal break-words text-sm text-text-destructive">
                           <span>{localize('com_ui_admin_access_warning')}</span>
                           {'\n'}
                           <a

client/src/components/ui/TermsAndConditionsModal.tsx

@@ -95,7 +95,7 @@ const TermsAndConditionsModal = ({
             </button>
             <button
               onClick={handleAccept}
-              className="inline-flex h-10 items-center justify-center rounded-lg border border-border-heavy bg-surface-secondary px-4 py-2 text-sm text-text-primary hover:bg-green-500 hover:text-white focus:bg-green-500 focus:text-white dark:hover:bg-green-600 dark:focus:bg-green-600"
+              className="inline-flex h-10 items-center justify-center rounded-lg border border-border-heavy bg-surface-secondary px-4 py-2 text-sm text-text-primary hover:bg-surface-submit hover:text-white focus:bg-surface-submit focus:text-white"
             >
               {localize('com_ui_accept')}
             </button>