Focus indicator style

1 files changed, 25 insertions, 23 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index b9020b6..cc7e500 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -12,7 +12,8 @@ $static-themes: 'black' 'white' !default;
     &:link,
     &:visited,
     &:enabled {
-        &:hover {
+        &:hover,
+        &:focus-visible {
             background-color: fn.color(--#{$theme} --hover --bg);
             color:            fn.color(--#{$theme} --hover --label);
         }
@@ -30,7 +31,8 @@ $static-themes: 'black' 'white' !default;
         &:link,
         &:visited,
         &:enabled {
-            &:hover {
+            &:hover,
+            &:focus-visible {
                 background-color: fn.color(--#{$theme}-quiet --hover --bg);
                 color:            fn.color(--#{$theme}-quiet --hover --label);
             }
@@ -47,10 +49,8 @@ $static-themes: 'black' 'white' !default;
         &:visited,
         &:enabled {
             &:focus-visible {
-                border-color:     fn.color(--#{$theme} --key-focus --border);
-                outline:          fn.color(--#{$theme} --key-focus --outline) solid fn.dim(--key-focus --outline);
-                background-color: fn.color(--#{$theme} --key-focus --bg);
-                color:            fn.color(--#{$theme} --key-focus --label);
+                outline:    fn.color(--#{$theme} --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(--#{$theme} --key-focus --outline);
             }
         }
     }
@@ -85,8 +85,9 @@ $static-themes: 'black' 'white' !default;
             ),
             
             --key-focus: (
-                --border:  fn.global-dim(--border --medium),
-                --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: (
@@ -99,10 +100,9 @@ $static-themes: 'black' 'white' !default;
                 --bg: fn.global-color(--heading),
             ),
             --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),
             ),
 
             --quiet: (
@@ -190,11 +190,13 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        padding-block:    calc(fn.dim(--pad-b) - fn.dim(--key-focus --border));
-        padding-inline:   calc(fn.dim(--pad-i) - fn.dim(--key-focus --border));
+        margin:           calc(-1 * fn.dim(--key-focus --border));
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
         border:           fn.dim(--key-focus --border) solid transparent;
-        border-radius:    fn.dim(--rounding);
+        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
         background-color: fn.color(--bg);
+        background-clip:  padding-box;
         color:            fn.color(--label);
         font-size:        fn.dim(--font-size);
         line-height:      fn.global-dim(--font --standard --line-height);
@@ -204,7 +206,8 @@ $static-themes: 'black' 'white' !default;
         &:link,
         &:visited,
         &:enabled {
-            &:hover {
+            &:hover,
+            &:focus-visible {
                 background-color: fn.color(--hover --bg);
             }
 
@@ -220,7 +223,8 @@ $static-themes: 'black' 'white' !default;
             &:link,
             &:visited,
             &:enabled {
-                &:hover {
+                &:hover,
+                &:focus-visible {
                     background-color: fn.color(--quiet --hover --bg);
                 }
 
@@ -240,10 +244,8 @@ $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);
+                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);
             }
         }
     
@@ -260,8 +262,8 @@ $static-themes: 'black' 'white' !default;
     
         @each $size in sm lg xl {
             @include iro.bem-modifier($size) {
-                padding-block:  calc(fn.dim(--#{$size} --pad-b) - fn.dim(--key-focus --border));
-                padding-inline: calc(fn.dim(--#{$size} --pad-i) - fn.dim(--key-focus --border));
+                padding-block:  fn.dim(--#{$size} --pad-b);
+                padding-inline: fn.dim(--#{$size} --pad-i);
                 font-size:      fn.dim(--#{$size} --font-size);
         
                 @include iro.bem-modifier('pill') {