From 806942ea39ec6223894e2f6714e596e3d4b1ccf2 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 11 Jun 2022 16:37:42 +0200
Subject: Added focus style for links

---
 src/scopes/_colored-links.scss   | 28 ++++++++++++++++++++++------
 src/scopes/_invisible-links.scss | 19 +++++++++++++++++++
 2 files changed, 41 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/scopes/_colored-links.scss b/src/scopes/_colored-links.scss
index d44dffc..4451cdc 100644
--- a/src/scopes/_colored-links.scss
+++ b/src/scopes/_colored-links.scss
@@ -4,22 +4,38 @@
 @include iro.props-namespace('colored-links') {
     @include iro.props-store((
         --colors: (
-            --link: (
-                --idle:    fn.global-color(--accent --link-idle --obj-lo),
-                --visited: fn.global-color(--accent --link-visited --obj-lo),
-            )
+            --idle:    fn.global-color(--accent --link-idle --obj-lo),
+            --visited: fn.global-color(--accent --link-visited --obj-lo),
+            --key-focus: (
+                --border: fn.global-color(--focus --fill),
+                --shadow: fn.global-color(--focus --shadow),
+            ),
         )
     ), 'colors');
 
     @include iro.bem-scope(iro.props-namespace()) {
         :link {
-            color:           fn.color(--link --idle);
+            color:           fn.color(--idle);
             text-decoration: underline;
         }
 
         :visited {
-            color:           fn.color(--link --visited);
+            color:           fn.color(--visited);
             text-decoration: underline;
         }
+
+        :link,
+        :visited {
+            margin:        -2px;
+            border:        2px solid transparent;
+            border-radius: 2px;
+
+            @include iro.bem-at-theme('keyboard') {
+                &:focus {
+                    border-color:  fn.color(--key-focus --border);
+                    box-shadow:    fn.color(--key-focus --shadow);
+                }
+            }
+        }
     }
 }
diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss
index 71dd9da..d02bc5f 100644
--- a/src/scopes/_invisible-links.scss
+++ b/src/scopes/_invisible-links.scss
@@ -1,15 +1,34 @@
 @use 'iro-sass/src/index' as iro;
 
 @include iro.props-namespace('invisible-links') {
+    @include iro.props-store((
+        --colors: (
+            --key-focus: (
+                --border: fn.global-color(--focus --fill),
+                --shadow: fn.global-color(--focus --shadow),
+            ),
+        )
+    ), 'colors');
+
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
+            margin:          -2px;
+            border:          2px solid transparent;
+            border-radius:   2px;
             color:           currentColor;
             text-decoration: none;
 
             &:hover {
                 text-decoration: underline;
             }
+
+            @include iro.bem-at-theme('keyboard') {
+                &:focus {
+                    border-color:  fn.color(--key-focus --border);
+                    box-shadow:    fn.color(--key-focus --shadow);
+                }
+            }
         }
     }
 }
-- 
cgit v1.2.3-70-g09d2