css: Redesign link styles.

This commit redesigns the link styles based on the Figma designs by
Vlad Korobov, and implements them in the navbar banners. This also
removes the `--color-text-link` which was being used in the custom
profile field links in the user card popovers while the variable did
not exist previously.

web/src/navbar_alerts.ts

@@ -352,9 +352,9 @@ const demo_organization_deadline_banner = (): AlertBanner => {
                 },
                 {
                     "z-demo-link": (content_html) =>
-                        `<a class="banner__link" href="https://zulip.com/help/demo-organizations" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
+                        `<a class="banner-link" href="https://zulip.com/help/demo-organizations" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
                     "z-convert-link": (content_html) =>
-                        `<a class="banner__link" href="https://zulip.com/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
+                        `<a class="banner-link" href="https://zulip.com/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
                     days_remaining,
                 },
             ),

web/src/portico/showroom.ts

@@ -108,9 +108,9 @@ const alert_banners: Record<string, AlertBanner> = {
                 },
                 {
                     demo_link: (content_html) =>
-                        `<a class="banner__link" href="https://zulip.com/help/demo-organizations" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
+                        `<a class="banner-link" href="https://zulip.com/help/demo-organizations" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
                     convert_link: (content_html) =>
-                        `<a class="banner__link" href="https://zulip.com/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
+                        `<a class="banner-link" href="https://zulip.com/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
                 },
             ),
         ),
@@ -129,7 +129,7 @@ const alert_banners: Record<string, AlertBanner> = {
                 },
                 {
                     "z-link": (content_html) =>
-                        `<a class="banner__link" href="https://zulip.com/help/desktop-notifications#desktop-notifications" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
+                        `<a class="banner-link" href="https://zulip.com/help/desktop-notifications#desktop-notifications" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
                 },
             ),
         ),

web/styles/app_variables.css

@@ -892,6 +892,21 @@
     --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%);
+
+    /* Link colors */
+    --color-text-link: hsl(210deg 94% 42%);
+    --color-text-link-decoration: color-mix(
+        in oklch,
+        hsl(210deg 94% 42%) 20%,
+        transparent
+    );
+    --color-text-link-hover: hsl(212deg 100% 50%);
+    --color-text-link-decoration-hover: color-mix(
+        in oklch,
+        hsl(212deg 100% 50%) 70%,
+        transparent
+    );
+    --color-text-link-active: hsl(212deg 100% 30%);
     /* These colors are from Bootstrap. */
     --color-text-generic-link: #08c;
     --color-text-generic-link-interactive: #005580;
@@ -1884,6 +1899,21 @@
     --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%);
+
+    /* Link colors */
+    --color-text-link: hsl(200deg 100% 50%);
+    --color-text-link-decoration: color-mix(
+        in oklch,
+        hsl(200deg 100% 50%) 20%,
+        transparent
+    );
+    --color-text-link-hover: hsl(200deg 100% 60%);
+    --color-text-link-decoration-hover: color-mix(
+        in oklch,
+        hsl(200deg 100% 60%) 70%,
+        transparent
+    );
+    --color-text-link-active: hsl(200deg 100% 50%);
     --color-text-generic-link: #08c;
     --color-text-generic-link-interactive: hsl(200deg 79% 66%);
 

web/styles/banners.css

@@ -15,8 +15,20 @@
     border-radius: 6px;
 }
 
-.banner__link {
+.banner-link {
-    color: var(--color-text-link-banner);
+    color: var(--color-text-link);
+    text-decoration: underline;
+    text-decoration-color: var(--color-text-link-decoration);
+
+    &:hover {
+        color: var(--color-text-link-hover);
+        text-decoration-color: var(--color-text-link-decoration-hover);
+    }
+
+    &:active {
+        color: var(--color-text-link-active);
+        text-decoration-color: currentcolor;
+    }
 }
 
 .banner-label {

web/styles/popovers.css

@@ -177,7 +177,6 @@
         color: var(--color-text-item);
 
         &:hover {
-            color: var(--color-text-link);
             text-decoration: none;
         }