From c10511e0e6c44f75b476fb30901a30c4ba97cc2c Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 12 Jan 2024 10:31:29 +0100 Subject: GitHub-style semitransparent link underline --- src/scopes/_links.scss | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) (limited to 'src/scopes') 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 { -- cgit v1.2.3-70-g09d2