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