Focus indicator style

1 files changed, 20 insertions, 13 deletions

diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 9e0b18a..552b02a 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,7 +9,13 @@
 
             --hover: (
                 --underline:     fn.global-dim(--border --medium),
-            )
+            ),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --border),
+            ),
         ),
         --colors: (
             --underline:         fn.global-color(--text-mute-more),
@@ -33,22 +39,24 @@
             ),
 
             --key-focus: (
-                --bg:            fn.global-color(--focus-static --400),
-                --text:          fn.global-color(--focus-static --400-text),
-            )
-        )
+                --text:          fn.global-color(--focus --text),
+                --border:        fn.global-color(--focus --border),
+                --outline:       fn.global-color(--focus --outline),
+            ),
+        ),
     ));
 
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            margin:                    calc(-1 * fn.global-dim(--border --thick));
-            padding:                   fn.global-dim(--border --thick);
-            border-radius:             calc(fn.dim(--rounding) + fn.global-dim(--border --thick));
+            margin:                    calc(-1 * fn.dim(--key-focus --border-offset));
+            padding:                   fn.dim(--key-focus --border-offset);
+            border-radius:             fn.dim(--rounding);
             color:                     currentColor;
             text-decoration:           underline;
             text-decoration-color:     fn.color(--underline);
             text-decoration-thickness: fn.dim(--underline);
+            box-decoration-break:      clone;
 
             &:hover {
                 text-decoration:           underline;
@@ -57,11 +65,10 @@
             }
 
             &:focus-visible {
-                background-color:          fn.color(--key-focus --bg);
-                color:                     fn.color(--key-focus --text);
-                text-decoration:           underline;
-                text-decoration-thickness: fn.dim(--hover --underline);
-                text-decoration-skip-ink:  none;
+                outline:          fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                box-shadow:       0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                color:            fn.color(--key-focus --text);
+                text-decoration:  none;
             }
         }