GitHub-style semitransparent link underline

1 files changed, 17 insertions, 6 deletions

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 {