GitHub-style semitransparent link underline

2 files changed, 18 insertions, 6 deletions

diff --git a/src/_functions.scss b/src/_functions.scss
index b956b67..354c5f7 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -117,6 +117,7 @@
             --bg:     rgba($base, .1),
             --obj:    rgba($base, .2),
             --obj-lo: rgba($base, .4),
+            --fg-hi:  rgba($base, .7),
             --fg:     blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
             --fg-lo:  blend.scale($base, $lightness: $dir * -45%, $chroma: $dir * -22.5%),
         ),
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4d9e571..e946d33 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -4,8 +4,11 @@
 @include iro.props-namespace('links') {
     @include iro.props-store((
         --colors: (
-            --idle:    fn.global-color(--accent --link-idle --quiet --fg),
-            --visited: fn.global-color(--accent --link-visited --quiet --fg),
+            --underline:         fn.global-color(--fg-hi2),
+
+            --idle:              fn.global-color(--accent --link-idle --quiet --fg),
+            --visited:           fn.global-color(--accent --link-visited --quiet --fg),
+            --colored-underline: fn.global-color(--accent --link-idle --quiet --fg-hi),
 
             --key-focus: (
                 --border: fn.global-color(--focus --fill),
@@ -14,12 +17,19 @@
         )
     ), 'colors');
 
+    @include iro.props-store((
+        --colors: (
+            --underline: fn.global-color(--fg-hi),
+        )
+    ), 'colors-dark');
+
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            border-radius:   .5px;
-            color:           currentColor;
-            text-decoration: underline;
+            border-radius:         .5px;
+            color:                 currentColor;
+            text-decoration:       underline;
+            text-decoration-color: fn.color(--underline);
 
             &:hover {
                 text-decoration: underline;
@@ -41,7 +51,8 @@
 
         @include iro.bem-modifier('colored') {
             :link {
-                color: fn.color(--idle);
+                color:                 fn.color(--idle);
+                text-decoration-color: fn.color(--colored-underline);
             }
     
             :visited {