From 155fc9f1d7f29783954d21935fb447806bec1b4a Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 10 Oct 2024 09:39:04 -0500
Subject: [PATCH] link_styles: Establish variable-based generic link styles.

---
 web/styles/app_variables.css              |  9 +++++++++
 web/styles/dark_theme.css                 | 16 ----------------
 web/styles/message_header.css             |  2 +-
 web/styles/zulip.css                      | 17 ++++++++++++++---
 web/third/bootstrap/css/bootstrap.app.css |  9 ---------
 5 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 3495306d24..69418d084b 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -730,6 +730,9 @@
     --color-text-settings-field-hint: hsl(0deg 0% 57%);
     --color-text-clear-search-button: hsl(0deg 0% 80%);
     --color-text-clear-search-button-hover: hsl(0deg 0% 0%);
+    /* These colors are from Bootstrap. */
+    --color-text-generic-link: #08c;
+    --color-text-generic-link-interactive: #005580;
 
     /* Demo Organization colors */
     --color-text-settings-demo-organization-warning: hsl(4deg 58% 33%);
@@ -1237,6 +1240,8 @@
     --color-text-settings-field-hint: hsl(0deg 0% 52%);
     --color-text-clear-search-button: hsl(236deg 33% 80%);
     --color-text-clear-search-button-hover: hsl(0deg 0% 100%);
+    --color-text-generic-link: #08c;
+    --color-text-generic-link-interactive: hsl(200deg 79% 66%);
 
     /* Demo Organization colors */
     --color-text-settings-demo-organization-warning: hsl(3deg 73% 80%);
@@ -1292,6 +1297,10 @@
     --color-markdown-pre-background: hsl(0deg 0% 100% / 4%);
     --color-markdown-pre-background-mentions: hsl(0deg 0% 100% / 5%);
     --color-markdown-pre-border-mentions: var(--color-markdown-pre-border);
+    --color-markdown-link: var(--color-text-generic-link);
+    --color-markdown-code-link: var(--color-markdown-link);
+    --color-markdown-link-hover: var(--color-text-generic-link-interactive);
+    --color-markdown-code-link-hover: var(--color-markdown-link-hover);
 
     /* Icon colors */
     --color-icon-bot: hsl(180deg 5% 50% / 100%);
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index cd306dbbc5..29b5b4158c 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -13,22 +13,6 @@
         @extend .placeholder;
     }
 
-    &
-        a:not(
-            .button,
-            .compose_control_button,
-            .conversation-partners,
-            .user-presence-link,
-            .typeahead-item-link
-        ):hover {
-        color: hsl(200deg 79% 66%);
-        text-decoration: none;
-
-        & code {
-            color: hsl(200deg 79% 66%);
-        }
-    }
-
     & ul.dm-list,
     & ul.filters {
         .has-unmuted-mentions .unread_mention_info {
diff --git a/web/styles/message_header.css b/web/styles/message_header.css
index 581aee3029..0c9686a108 100644
--- a/web/styles/message_header.css
+++ b/web/styles/message_header.css
@@ -34,7 +34,7 @@
             color: var(--color-text-message-header);
 
             &:hover {
-                color: var(--color-text-message-header) !important;
+                color: var(--color-text-message-header);
                 text-decoration: none;
             }
         }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 9b9099b9af..f0809a58bb 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -68,12 +68,23 @@ blockquote p {
     font-weight: normal;
 }
 
+/* These colors are typically overridden,
+   but referencing them as variables prevents
+   specificity wars and ugly :not() selectors,
+   especially in dark theme. */
 a {
     cursor: pointer;
+    color: var(--color-text-generic-link);
+    text-decoration: none;
+}
 
-    &.message_label_clickable:hover {
-        cursor: pointer;
-        color: hsl(200deg 100% 40%);
+a:hover,
+a:focus {
+    color: var(--color-text-generic-link-interactive);
+    text-decoration: underline;
+
+    & code {
+        color: var(--color-text-generic-link-interactive);
     }
 }
 
diff --git a/web/third/bootstrap/css/bootstrap.app.css b/web/third/bootstrap/css/bootstrap.app.css
index c24abc49da..0f558dfa49 100644
--- a/web/third/bootstrap/css/bootstrap.app.css
+++ b/web/third/bootstrap/css/bootstrap.app.css
@@ -57,15 +57,6 @@ label,
 button {
   cursor: pointer;
 }
-a {
-  color: #0088cc;
-  text-decoration: none;
-}
-a:hover,
-a:focus {
-  color: #005580;
-  text-decoration: underline;
-}
 p {
   margin: 0 0 10px;
 }