From d8b0e6aa39befac01a73ede424fcfd643d457759 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Mon, 2 Dec 2024 16:17:00 +0100
Subject: [PATCH] Make text links underlined by default #577

Since the color inheritance for links has been introduced
in #492, links in e.g. validation messages cannot be
distinguished from regular text until hovered. We chose
to underline all text links by default to make those links
discoverable by users.
---
 src/styles/elements/_links.scss | 1 +
 src/styles/theme/_links.scss    | 1 +
 src/theme.scss                  | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/styles/elements/_links.scss b/src/styles/elements/_links.scss
index 30f62de2..724a9231 100644
--- a/src/styles/elements/_links.scss
+++ b/src/styles/elements/_links.scss
@@ -2,6 +2,7 @@
 
 a {
     text-decoration: links.$decoration;
+    text-underline-offset: links.$underline-offset;
     color: links.$color;
 
     &:hover {
diff --git a/src/styles/theme/_links.scss b/src/styles/theme/_links.scss
index c3fc7e26..67219d42 100644
--- a/src/styles/theme/_links.scss
+++ b/src/styles/theme/_links.scss
@@ -1,5 +1,6 @@
 $color: var(--rui-local-link-color, var(--rui-color-text-link));
 $decoration: var(--rui-text-decoration-link);
+$underline-offset: var(--rui-underline-offset-link);
 $hover-color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
 $hover-decoration: var(--rui-text-decoration-link-hover);
 $active-color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
diff --git a/src/theme.scss b/src/theme.scss
index d7537a63..8415f20b 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -109,7 +109,8 @@
         --rui-line-height-small: 1.25;
 
         // Text decorations
-        --rui-text-decoration-link: none;
+        --rui-underline-offset-link: 0.1875em;
+        --rui-text-decoration-link: underline;
         --rui-text-decoration-link-hover: underline;
         --rui-text-decoration-link-active: underline;