link_styles: Establish variable-based generic link styles.

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%);

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 {

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;
             }
         }

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 {
+a:hover,
-        cursor: pointer;
+a:focus {
-        color: hsl(200deg 100% 40%);
+    color: var(--color-text-generic-link-interactive);
+    text-decoration: underline;
+
+    & code {
+        color: var(--color-text-generic-link-interactive);
     }
 }
 

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;
 }