WIP: Refactoring

1 files changed, 51 insertions, 24 deletions

diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 2e68952..115b199 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -3,42 +3,61 @@
 
 @include iro.props-namespace('links') {
     @include iro.props-store((
+        --dims: (
+            --underline:         fn.global-dim(--border --thin),
+
+            --hover: (
+                --underline:    fn.global-dim(--border --medium),
+            )
+        ),
         --colors: (
-            --underline:         fn.global-color(--fg-hi2),
+            --underline:         fn.global-color(--text-mute-more),
 
-            --idle:              fn.global-color(--accent --link-idle --quiet --fg),
-            --visited:           fn.global-color(--accent --link-visited --quiet --fg),
-            --idle-underline:    fn.global-color(--accent --link-idle --quiet --fg-hi),
-            --visited-underline: fn.global-color(--accent --link-visited --quiet --fg-hi),
+            --idle: (
+                --text:          fn.global-color(--accent --1000),
+                --underline:     fn.global-color(--accent --700),
 
-            --key-focus: (
-                --border: fn.global-color(--focus --fill),
-                --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo),
+                --hover: (
+                    --text:      fn.global-color(--accent --1200),
+                ),
             ),
-        )
-    ), 'colors');
 
-    @include iro.props-store((
-        --colors: (
-            --underline: fn.global-color(--fg-hi),
+            --visited: (
+                --text:          fn.global-color(--purple --1000),
+                --underline:     fn.global-color(--purple --700),
+
+                --hover: (
+                    --text:      fn.global-color(--purple --1200),
+                ),
+            ),
+
+            --focus: (
+                --bg:            fn.global-color(--yellow-static --400),
+                --text:          #000,
+            )
         )
-    ), 'colors-dark');
+    ));
 
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            border-radius:         .5px;
-            color:                 currentColor;
-            text-decoration:       underline;
-            text-decoration-color: fn.color(--underline);
+            border-radius:             .5px;
+            color:                     currentColor;
+            text-decoration:           underline;
+            text-decoration-color:     fn.color(--underline);
+            text-decoration-thickness: fn.dim(--underline);
 
             &:hover {
-                text-decoration: underline;
+                text-decoration:           underline;
+                text-decoration-thickness: fn.dim(--hover --underline);
             }
 
             @include iro.bem-at-theme('keyboard') {
                 &:focus {
-                    box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                    background-color:          fn.color(--focus --bg);
+                    color:                     fn.color(--focus --text);
+                    text-decoration:           none;
+                    border-block-end:          fn.dim(--hover --underline) solid currentColor;
                 }
             }
         }
@@ -52,13 +71,21 @@
 
         @include iro.bem-modifier('colored') {
             :link {
-                color:                 fn.color(--idle);
-                text-decoration-color: fn.color(--idle-underline);
+                color:                 fn.color(--idle --text);
+                text-decoration-color: fn.color(--idle --underline);
+
+                &:hover {
+                    color:             fn.color(--idle --hover --text);
+                }
             }
     
             :visited {
-                color:                 fn.color(--visited);
-                text-decoration-color: fn.color(--visited-underline);
+                color:                 fn.color(--visited --text);
+                text-decoration-color: fn.color(--visited --underline);
+
+                &:hover {
+                    color:             fn.color(--visited --hover --text);
+                }
             }
         }
     }