From 30640436c4e44e8238f071a3e86005d61edfc111 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 3 Apr 2026 10:47:19 +0800
Subject: [PATCH] refactor(editor): style links with brand color and subtle
 underline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use var(--brand) instead of var(--primary) for link color (blue vs
  near-black)
- Add default underline at 40% opacity, full opacity on hover
- Remove Tailwind HTMLAttributes from Link extensions — let CSS control
  all link styling uniformly
- Mention cards unaffected (a.issue-mention overrides with color: inherit)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/features/editor/content-editor.css  | 9 +++++----
 apps/web/features/editor/extensions/index.ts | 6 ------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/apps/web/features/editor/content-editor.css b/apps/web/features/editor/content-editor.css
index 0ed12232..b6e7ed16 100644
--- a/apps/web/features/editor/content-editor.css
+++ b/apps/web/features/editor/content-editor.css
@@ -287,14 +287,15 @@
 
 /* Links */
 .rich-text-editor a {
-  color: var(--primary);
-  text-decoration: none;
+  color: var(--brand);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
+  text-underline-offset: 2px;
   cursor: pointer;
 }
 
 .rich-text-editor a:hover {
-  text-decoration: underline;
-  text-underline-offset: 2px;
+  text-decoration-color: var(--brand);
 }
 
 /* Issue mention cards — inline cards that sit within text flow */
diff --git a/apps/web/features/editor/extensions/index.ts b/apps/web/features/editor/extensions/index.ts
index 94c9bb00..b901b452 100644
--- a/apps/web/features/editor/extensions/index.ts
+++ b/apps/web/features/editor/extensions/index.ts
@@ -27,17 +27,11 @@ const LinkEditable = Link.extend({ inclusive: false }).configure({
   openOnClick: true,
   autolink: true,
   linkOnPaste: false,
-  HTMLAttributes: {
-    class: "text-primary hover:underline cursor-pointer",
-  },
 });
 
 const LinkReadonly = Link.configure({
   openOnClick: false,
   autolink: false,
-  HTMLAttributes: {
-    class: "text-primary hover:underline cursor-pointer",
-  },
 });
 
 const ImageExtension = Image.extend({