Focus indicator style

1 files changed, 33 insertions, 41 deletions

diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index a254ec4..509822b 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -11,14 +11,20 @@
             --pad-b:           fn.global-dim(--size --65),
             --rounding:        fn.global-dim(--rounding),
             --spacing-sibling: fn.global-dim(--size --300),
+
+            --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: (
-            --box-border: fn.global-color(--text-mute),
+            --box-border: fn.global-color(--text-mute-more),
             --box-bg:     fn.global-color(--base --75),
     
             --hover: (
                 --label:      fn.global-color(--heading),
-                --box-border: fn.global-color(--text),
+                --box-border: fn.global-color(--text-mute),
             ),
             --accent: (
                 --box-border: fn.global-color(--accent --900),
@@ -27,37 +33,40 @@
                     --box-border: fn.global-color(--accent --1000),
                 ),
             ),
-            --key-focus: (
-                --bg:         fn.global-color(--focus-static --400),
-                --label:      fn.global-color(--focus-static --400-text),
-                --box-border: fn.global-color(--focus-static --1000),
-                --box-bg:     fn.global-color(--focus-static --1000-text),
-            ),
             --disabled: (
                 --label:      fn.global-color(--text-disabled),
                 --box-border: fn.global-color(--border-strong),
                 --box-bg:     fn.global-color(--base --75),
-            )
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
         ),
     ));
 
     @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-flex;
+        display:        inline-block;
         position:       relative;
-        align-items:    flex-start;
-        margin-inline:  calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b));
+        margin-inline:
+            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
+            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset));
         padding-block:  fn.dim(--pad-b);
         padding-inline: fn.dim(--pad-i);
 
         @include iro.bem-elem('box') {
-            display:            block;
+            display:            inline-block;
             position:           relative;
             flex:               0 0 auto;
             inline-size:        fn.dim(--size);
             block-size:         fn.dim(--size);
-            margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
-            border-radius:      fn.dim(--border);
+            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset));
+            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:      calc(fn.dim(--border) + fn.dim(--key-focus --border-offset));
             background-color:   fn.color(--box-border);
+            background-clip:    padding-box;
+            vertical-align:     top;
     
             &::before,
             &::after {
@@ -110,8 +119,7 @@
         }
     
         @include iro.bem-elem('label') {
-            align-self:  baseline;
-            margin-left: fn.dim(--label-gap);
+            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
         }
     
         @include iro.bem-elem('native') {
@@ -127,7 +135,8 @@
             overflow:           hidden;
             border-radius:      fn.dim(--rounding);
     
-            &:hover {
+            &:hover,
+            &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--hover --label);
                 }
@@ -180,26 +189,13 @@
             }
     
             &:focus-visible {
-                background-color: fn.color(--key-focus --bg);
-
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--key-focus --label);
                 }
 
                 @include iro.bem-sibling-elem('box') {
-                    background-color: fn.color(--key-focus --box-border);
-
-                    &::before {
-                        background-color: fn.color(--key-focus --box-bg);
-                    }
-
-                    &::after {
-                        border-color: fn.color(--key-focus --box-bg);
-                    }
-
-                    @include iro.bem-elem('check-icon') {
-                        color: fn.color(--key-focus --box-bg);
-                    }
+                    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);
                 }
             }
         }
@@ -217,7 +213,8 @@
                         background-color: fn.color(--accent --box-border);
                     }
         
-                    &:hover {
+                    &:hover,
+                    &:focus-visible {
                         @include iro.bem-sibling-elem('box') {
                             background-color: fn.color(--accent --hover --box-border);
                         }
@@ -229,7 +226,8 @@
                         background-color: fn.color(--accent --box-border);
                     }
         
-                    &:hover {
+                    &:hover,
+                    &:focus-visible {
                         @include iro.bem-sibling-elem('box') {
                             background-color: fn.color(--accent --hover --box-border);
                         }
@@ -257,12 +255,6 @@
                         }
                     }
                 }
-
-                &:focus-visible {
-                    @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--key-focus --box-border);
-                    }
-                }
             }
         }
     }