From 97ac833176cda87486d7f1211f0fe0f0a68beb71 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 17 Aug 2023 18:00:23 +0100
Subject: [PATCH] Update link design (#8375)

Co-authored-by: Alexander Brandes <mc.cache@web.de>
---
 war/src/main/scss/abstracts/mixins.scss | 10 +++++++++
 war/src/main/scss/abstracts/theme.scss  |  2 +-
 war/src/main/scss/base/style.scss       | 28 -------------------------
 war/src/main/scss/base/typography.scss  | 18 ++++++++++++++++
 4 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/war/src/main/scss/abstracts/mixins.scss b/war/src/main/scss/abstracts/mixins.scss
index 37060d09d19e..63a963f698c6 100644
--- a/war/src/main/scss/abstracts/mixins.scss
+++ b/war/src/main/scss/abstracts/mixins.scss
@@ -1,6 +1,8 @@
 @mixin link {
   text-decoration: var(--link-text-decoration);
   font-weight: var(--link-font-weight);
+  text-underline-offset: 2px;
+  text-decoration-thickness: 2px;
 
   &:link {
     color: var(--link-color);
@@ -20,6 +22,14 @@
     color: var(--link-color--active);
     text-decoration: var(--link-text-decoration--active);
   }
+
+  @media (prefers-contrast: more) {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration-thickness: 3px;
+    }
+  }
 }
 
 @mixin link-dark {
diff --git a/war/src/main/scss/abstracts/theme.scss b/war/src/main/scss/abstracts/theme.scss
index be48ffd9d74d..c2bb35014d07 100644
--- a/war/src/main/scss/abstracts/theme.scss
+++ b/war/src/main/scss/abstracts/theme.scss
@@ -183,7 +183,7 @@ $semantics: (
   --link-text-decoration: none;
   --link-text-decoration--hover: underline;
   --link-text-decoration--active: underline;
-  --link-font-weight: 600;
+  --link-font-weight: 500;
 
   // Tooltips
   --tooltip-backdrop-filter: contrast(0.6) brightness(2.4) saturate(2)
diff --git a/war/src/main/scss/base/style.scss b/war/src/main/scss/base/style.scss
index 647844da6a2e..22acd9884ee4 100644
--- a/war/src/main/scss/base/style.scss
+++ b/war/src/main/scss/base/style.scss
@@ -1,5 +1,3 @@
-@use "../abstracts/mixins";
-
 /*
  * The MIT License
  *
@@ -116,27 +114,6 @@ td.no-wrap {
     color: #ccc;
 } */
 
-a {
-  @include mixins.link;
-}
-
-.jenkins-link--with-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  svg {
-    width: 16px;
-    height: 16px;
-    flex: 0 0 auto;
-    color: var(--text-color) !important;
-  }
-}
-
-p a {
-  text-decoration: underline;
-}
-
 a.lowkey:link {
   text-decoration: none;
   color: inherit;
@@ -239,7 +216,6 @@ pre {
   line-height: 1.66;
 
   a {
-    font-weight: inherit;
     word-wrap: break-word;
   }
 }
@@ -560,10 +536,6 @@ pre.console {
   }
 }
 
-.help a {
-  text-decoration: underline;
-}
-
 .help .from-plugin {
   text-align: right;
   color: #666;
diff --git a/war/src/main/scss/base/typography.scss b/war/src/main/scss/base/typography.scss
index d8ecfa61efb8..2b35478325fa 100644
--- a/war/src/main/scss/base/typography.scss
+++ b/war/src/main/scss/base/typography.scss
@@ -1,3 +1,5 @@
+@use "../abstracts/mixins";
+
 body,
 p {
   font-family: var(--font-family-sans);
@@ -96,3 +98,19 @@ h6,
     opacity: 0.7;
   }
 }
+
+a {
+  @include mixins.link;
+}
+
+.jenkins-link--with-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: var(--text-color) !important;
+  }
+}