Added focus style for links

2 files changed, 41 insertions, 6 deletions

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);
+                }
+            }
         }
     }
 }