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.

Author: adamkudrna

src/styles/elements/_links.scss

@@ -2,6 +2,7 @@
 
 a {
     text-decoration: links.$decoration;
+    text-underline-offset: links.$underline-offset;
     color: links.$color;
 
     &:hover {

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));

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;