From 06005bc32cfa48df2fa41baae11a60c77e6c142b Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Wed, 22 Jan 2025 17:56:27 +0530
Subject: [PATCH] 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     |  4 ++--
 web/src/portico/showroom.ts  |  6 +++---
 web/styles/app_variables.css | 30 ++++++++++++++++++++++++++++++
 web/styles/banners.css       | 16 ++++++++++++++--
 web/styles/popovers.css      |  1 -
 5 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/web/src/navbar_alerts.ts b/web/src/navbar_alerts.ts
index b6c7358ab8..9185a3d1f0 100644
--- a/web/src/navbar_alerts.ts
+++ b/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,
                 },
             ),
diff --git a/web/src/portico/showroom.ts b/web/src/portico/showroom.ts
index 408a4f6962..66f805e9cd 100644
--- a/web/src/portico/showroom.ts
+++ b/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>`,
                 },
             ),
         ),
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 9e0b236140..17e9f2d8de 100644
--- a/web/styles/app_variables.css
+++ b/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%);
 
diff --git a/web/styles/banners.css b/web/styles/banners.css
index 626933ad0d..9437c5d67e 100644
--- a/web/styles/banners.css
+++ b/web/styles/banners.css
@@ -15,8 +15,20 @@
     border-radius: 6px;
 }
 
-.banner__link {
-    color: var(--color-text-link-banner);
+.banner-link {
+    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 {
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 4c1496d35d..04c08d91e6 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -177,7 +177,6 @@
         color: var(--color-text-item);
 
         &:hover {
-            color: var(--color-text-link);
             text-decoration: none;
         }