Update link design (#8375)

Co-authored-by: Alexander Brandes <mc.cache@web.de>
jenkinsci · Aug 17, 2023 · 97ac833 · 97ac833
1 parent 0b37bcb
commit 97ac833
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+  }
+}