Update

1 files changed, 38 insertions, 20 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 0da3a65..08dc0ea 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,8 +2,8 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-$themes:        'accent' 'negative';
-$static-themes: 'black' 'white';
+$themes:        'accent' 'negative' !default;
+$static-themes: 'black' 'white' !default;
 
 @mixin theme($theme: null) {
     $key: if($theme == null, (), --#{$theme});
@@ -57,6 +57,17 @@ $static-themes: 'black' 'white';
     }
 
     @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));
+        }
+    }
 }
 
 @include iro.props-namespace('button') {
@@ -86,7 +97,7 @@ $static-themes: 'black' 'white';
             ),
             
             --key-focus: (
-                --border: fn.global-dim(--key-focus --border),
+                --outline: fn.global-dim(--key-focus --border),
             ),
         ),
         --colors: (
@@ -111,7 +122,8 @@ $static-themes: 'black' 'white';
             --key-focus: (
                 --bg:      fn.global-color(--base --50),
                 --label:   fn.global-color(--heading),
-                --border:  fn.global-color(--focus-static --400),
+                --border:  fn.global-color(--focus --1100),
+                --outline: fn.global-color(--focus --400),
             ),
             
             --primary: (
@@ -163,11 +175,6 @@ $static-themes: 'black' 'white';
                     --outline-border: fn.global-color(--#{$theme}-transparent --300),
                     --outline-label:  fn.global-color(--#{$theme}-transparent --900),
 
-                    --disabled: (
-                        --bg:             fn.global-color(--#{$theme}-transparent --200),
-                        --outline-border: fn.global-color(--#{$theme}-transparent --300),
-                        --label:          fn.global-color(--#{$theme}-transparent --500),
-                    ),
                     --hover: (
                         --bg:     fn.global-color(--#{$theme}-transparent --300),
                         --label:  fn.global-color(--#{$theme}-transparent --900),
@@ -176,6 +183,17 @@ $static-themes: 'black' 'white';
                         --bg:     fn.global-color(--#{$theme}-transparent --400),
                         --label:  fn.global-color(--#{$theme}-transparent --900),
                     ),
+                    --disabled: (
+                        --bg:             fn.global-color(--#{$theme}-transparent --200),
+                        --outline-border: fn.global-color(--#{$theme}-transparent --300),
+                        --label:          fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                    --key-focus: (
+                        --bg:      fn.global-color(--#{$theme}-transparent --100),
+                        --label:   fn.global-color(--#{$theme}-transparent --900),
+                        --border:  fn.global-color(--#{$theme}-transparent --900),
+                        --outline: fn.global-color(--#{$theme}-transparent --300),
+                    ),
                 ),
                 --static-#{$theme}-primary: (
                     --bg:             fn.global-color(--#{$theme}-transparent --800),
@@ -240,28 +258,28 @@ $static-themes: 'black' 'white';
                 @include theme($theme);
             }
         }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include static-theme($theme);
-            }
-
-            @include iro.bem-modifier(static-#{$theme}-primary) {
-                @include static-theme(#{$theme}-primary, $theme);
-            }
-        }
 
         &:link,
         &: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);
-                box-shadow:       0 0 0 calc(fn.dim(--key-focus --border) - fn.dim(--border)) fn.color(--key-focus --border);
                 color:            fn.color(--key-focus --label);
             }
         }
     
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                @include static-theme($theme);
+            }
+
+            @include iro.bem-modifier(static-#{$theme}-primary) {
+                @include static-theme(#{$theme}-primary, $theme);
+            }
+        }
+    
         @include iro.bem-modifier('round') {
             inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
             padding-inline: 0;