From b2cbe3939ea1aea14b098d4e34698f08726764cc Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 20 Jun 2026 16:35:29 +0200
Subject: [PATCH] refactor: add semantic link color token and migrate
 hyperlinks to it

---
 client/src/components/Auth/LoginForm.tsx                    | 2 +-
 client/src/components/Auth/VerifyEmail.tsx                  | 2 +-
 client/src/components/Banners/Banner.tsx                    | 2 +-
 client/src/components/Chat/Input/MCPConfigDialog.tsx        | 2 +-
 .../src/components/Chat/Messages/Content/Parts/LogLink.tsx  | 2 +-
 client/src/components/Input/SetKeyDialog/HelpText.tsx       | 6 +++---
 client/src/components/MCP/CustomUserVarsSection.tsx         | 2 +-
 client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx | 2 +-
 .../Nav/SettingsTabs/General/ArchivedChatsTable.tsx         | 2 +-
 client/src/components/Plugins/Store/PluginPagination.tsx    | 4 ++--
 client/src/components/ui/AdminSettingsDialog.tsx            | 2 +-
 client/src/style.css                                        | 6 ++++++
 packages/client/src/theme/utils/createTailwindColors.js     | 4 ++++
 13 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 3d0a2528d5..31665dbf07 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -80,7 +80,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
           {localize('com_auth_email_verification_resend_prompt')}
           <button
             type="button"
-            className="ml-2 text-blue-600 hover:underline"
+            className="ml-2 text-link hover:underline"
             onClick={handleResendEmail}
             disabled={resendLinkMutation.isLoading}
           >
diff --git a/client/src/components/Auth/VerifyEmail.tsx b/client/src/components/Auth/VerifyEmail.tsx
index fb5c787196..4c24b5437b 100644
--- a/client/src/components/Auth/VerifyEmail.tsx
+++ b/client/src/components/Auth/VerifyEmail.tsx
@@ -90,7 +90,7 @@ function RequestPasswordReset() {
         <p className="text-center text-lg text-gray-600 dark:text-gray-400">
           {localize('com_auth_email_verification_resend_prompt')}
           <button
-            className="ml-2 text-blue-600 hover:underline"
+            className="ml-2 text-link hover:underline"
             onClick={handleResendEmail}
             disabled={resendEmailMutation.isLoading}
           >
diff --git a/client/src/components/Banners/Banner.tsx b/client/src/components/Banners/Banner.tsx
index 72c1891683..24bd23b1be 100644
--- a/client/src/components/Banners/Banner.tsx
+++ b/client/src/components/Banners/Banner.tsx
@@ -62,7 +62,7 @@ export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) =
     >
       <div
         className={cn(
-          'text-md w-full truncate text-center [&_a]:text-blue-700 [&_a]:underline dark:[&_a]:text-blue-400',
+          'text-md w-full truncate text-center [&_a]:text-link [&_a]:underline',
           !banner.persistable && 'px-4',
         )}
         dangerouslySetInnerHTML={{ __html: sanitizedMessage }}
diff --git a/client/src/components/Chat/Input/MCPConfigDialog.tsx b/client/src/components/Chat/Input/MCPConfigDialog.tsx
index 44d846c06f..f5ffc9c08e 100644
--- a/client/src/components/Chat/Input/MCPConfigDialog.tsx
+++ b/client/src/components/Chat/Input/MCPConfigDialog.tsx
@@ -115,7 +115,7 @@ export default function MCPConfigDialog({
                 />
                 {details.description && (
                   <p
-                    className="text-xs text-text-secondary [&_a]:text-blue-500 [&_a]:hover:text-blue-600 dark:[&_a]:text-blue-400 dark:[&_a]:hover:text-blue-300"
+                    className="text-xs text-text-secondary [&_a]:text-link [&_a]:hover:text-link-hover"
                     dangerouslySetInnerHTML={{ __html: sanitize(details.description) }}
                   />
                 )}
diff --git a/client/src/components/Chat/Messages/Content/Parts/LogLink.tsx b/client/src/components/Chat/Messages/Content/Parts/LogLink.tsx
index 7d81a7c42e..fdacd587a5 100644
--- a/client/src/components/Chat/Messages/Content/Parts/LogLink.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/LogLink.tsx
@@ -97,7 +97,7 @@ const LogLink: React.FC<LogLinkProps> = ({ href, filename, file_id, user, source
       onClick={handleDownload}
       target="_blank"
       rel="noopener noreferrer"
-      className="!text-blue-400 visited:!text-purple-400 hover:underline"
+      className="!text-link visited:!text-link-visited hover:underline"
     >
       {children}
     </a>
diff --git a/client/src/components/Input/SetKeyDialog/HelpText.tsx b/client/src/components/Input/SetKeyDialog/HelpText.tsx
index 568dccdb16..5e83d811f6 100644
--- a/client/src/components/Input/SetKeyDialog/HelpText.tsx
+++ b/client/src/components/Input/SetKeyDialog/HelpText.tsx
@@ -15,7 +15,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
             target="_blank"
             href="https://console.cloud.google.com/vertex-ai"
             rel="noreferrer"
-            className="text-blue-700 underline dark:text-blue-400"
+            className="text-link underline"
           >
             {localize('com_endpoint_config_key_google_vertex_ai')}
           </a>{' '}
@@ -24,7 +24,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
             target="_blank"
             href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
             rel="noreferrer"
-            className="text-blue-700 underline dark:text-blue-400"
+            className="text-link underline"
           >
             {localize('com_endpoint_config_key_google_service_account')}
           </a>
@@ -39,7 +39,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
             target="_blank"
             href="https://makersuite.google.com/app/apikey"
             rel="noreferrer"
-            className="text-blue-700 underline dark:text-blue-400"
+            className="text-link underline"
           >
             {localize('com_endpoint_config_click_here')}
           </a>{' '}
diff --git a/client/src/components/MCP/CustomUserVarsSection.tsx b/client/src/components/MCP/CustomUserVarsSection.tsx
index 2254872399..ab8ff8cde5 100644
--- a/client/src/components/MCP/CustomUserVarsSection.tsx
+++ b/client/src/components/MCP/CustomUserVarsSection.tsx
@@ -100,7 +100,7 @@ function AuthField({ name, config, hasValue, control, errors, autoFocus }: AuthF
       />
       {sanitizedDescription && (
         <p
-          className="text-xs text-text-secondary [&_a]:text-blue-500 [&_a]:hover:underline"
+          className="text-xs text-text-secondary [&_a]:text-link [&_a]:hover:underline"
           dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
         />
       )}
diff --git a/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx b/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
index 0eaaed2088..b8b347ba91 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-blue-600 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-ring"
                 title={title}
               >
                 <span className="truncate">{title}</span>
diff --git a/client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx b/client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx
index 15ac9dc456..539d83b58b 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-blue-600 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-ring"
                 title={title}
                 aria-label={localize('com_ui_open_archived_chat_new_tab_title', { title })}
               >
diff --git a/client/src/components/Plugins/Store/PluginPagination.tsx b/client/src/components/Plugins/Store/PluginPagination.tsx
index 7cd7a12763..d08fb6667e 100644
--- a/client/src/components/Plugins/Store/PluginPagination.tsx
+++ b/client/src/components/Plugins/Store/PluginPagination.tsx
@@ -64,8 +64,8 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
           tabIndex={0}
           className={`flex h-5 w-5 items-center justify-center text-sm ${
             currentPage === page
-              ? 'text-blue-600 hover:text-blue-600 dark:text-blue-600 dark:hover:text-blue-600'
-              : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
+              ? 'text-link hover:text-link'
+              : 'text-text-secondary hover:text-text-primary'
           }`}
           style={{ userSelect: 'none' }}
           onClick={() => onChangePage(page)}
diff --git a/client/src/components/ui/AdminSettingsDialog.tsx b/client/src/components/ui/AdminSettingsDialog.tsx
index d2e8dc19c2..92764999bd 100644
--- a/client/src/components/ui/AdminSettingsDialog.tsx
+++ b/client/src/components/ui/AdminSettingsDialog.tsx
@@ -228,7 +228,7 @@ const AdminSettingsDialog: React.FC<AdminSettingsDialogProps> = ({
                             href="https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/interface"
                             target="_blank"
                             rel="noreferrer"
-                            className="text-blue-500 underline"
+                            className="text-link underline"
                           >
                             {localize('com_ui_more_info')}
                           </a>
diff --git a/client/src/style.css b/client/src/style.css
index 4f500a90c9..e72effbe38 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -86,6 +86,9 @@ html {
   --text-tertiary: var(--gray-500);
   --text-warning: var(--amber-500);
   --text-destructive: var(--red-600);
+  --link: var(--blue-600);
+  --link-hover: var(--blue-700);
+  --link-visited: #9333ea;
   --ring-primary: var(--gray-500);
   --header-primary: var(--white);
   --header-hover: var(--gray-50);
@@ -164,6 +167,9 @@ html {
   --text-tertiary: var(--gray-500);
   --text-warning: var(--amber-500);
   --text-destructive: var(--red-600);
+  --link: var(--blue-400);
+  --link-hover: var(--blue-300);
+  --link-visited: #c084fc;
   --header-primary: var(--gray-700);
   --header-hover: var(--gray-600);
   --header-button-hover: var(--gray-700);
diff --git a/packages/client/src/theme/utils/createTailwindColors.js b/packages/client/src/theme/utils/createTailwindColors.js
index e86ad04cac..6ed986e5f6 100644
--- a/packages/client/src/theme/utils/createTailwindColors.js
+++ b/packages/client/src/theme/utils/createTailwindColors.js
@@ -69,6 +69,10 @@ function createTailwindColors() {
     'text-warning': cssVar('--text-warning'),
     'text-destructive': cssVar('--text-destructive'),
 
+    link: cssVar('--link'),
+    'link-hover': cssVar('--link-hover'),
+    'link-visited': cssVar('--link-visited'),
+
     'ring-primary': cssVar('--ring-primary'),
 
     'header-primary': cssVar('--header-primary'),