Focus indicator style

1 files changed, 28 insertions, 19 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 08dc0ea..49f3f67 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -29,7 +29,8 @@ $static-themes: 'black' 'white' !default;
     &:link,
     &:visited,
     &:enabled {
-        &:hover {
+        &:hover,
+        &:focus-visible {
             border-color:     transparent;
             background-color: fn.color(list.join($key, --hover --bg));
             color:            fn.color(list.join($key, --hover --label));
@@ -58,15 +59,9 @@ $static-themes: 'black' 'white' !default;
 
     @include theme(static-#{$theme});
 
-    &:link,
-    &:visited,
-    &:enabled {
-        &:focus-visible {
-            border-color:     fn.color(list.join($key, --key-focus --border));
-            outline:          fn.color(list.join($key, --key-focus --outline)) solid fn.dim(--key-focus --outline);
-            background-color: fn.color(list.join($key, --key-focus --bg));
-            color:            fn.color(list.join($key, --key-focus --label));
-        }
+    &::after {
+        outline:    fn.color(list.join($key, --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(list.join($key, --key-focus --outline));
     }
 }
 
@@ -97,7 +92,9 @@ $static-themes: 'black' 'white' !default;
             ),
             
             --key-focus: (
-                --outline: fn.global-dim(--key-focus --border),
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
             ),
         ),
         --colors: (
@@ -120,10 +117,9 @@ $static-themes: 'black' 'white' !default;
                 --label:          fn.global-color(--text-disabled),
             ),
             --key-focus: (
-                --bg:      fn.global-color(--base --50),
-                --label:   fn.global-color(--heading),
-                --border:  fn.global-color(--focus --1100),
-                --outline: fn.global-color(--focus --400),
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
             ),
             
             --primary: (
@@ -216,6 +212,7 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
+        position:         relative;
         padding-block:    fn.dim(--pad-b);
         padding-inline:   fn.dim(--pad-i);
         border:           fn.dim(--border) solid transparent;
@@ -228,6 +225,19 @@ $static-themes: 'black' 'white' !default;
         line-height:      fn.dim(--line-height);
         text-align:       center;
         text-decoration:  none;
+
+        &::after {
+            content:        '';
+            display:        none;
+            position:       absolute;
+            z-index:        1;
+            inset-block:    calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
+            inset-inline:   calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
+            border-radius:  fn.dim(--rounding);
+            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);
+            pointer-events: none;
+        }
     
         @include iro.bem-modifier('block') {
             display: block;
@@ -263,10 +273,9 @@ $static-themes: 'black' 'white' !default;
         &:visited,
         &:enabled {
             &:focus-visible {
-                border-color:     fn.color(--key-focus --border);
-                outline:          fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline);
-                background-color: fn.color(--key-focus --bg);
-                color:            fn.color(--key-focus --label);
+                &::after {
+                    display: block;
+                }
             }
         }