Focus indicator style

1 files changed, 16 insertions, 3 deletions

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 91c4bea..f657057 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use 'sass:list';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
@@ -103,7 +104,9 @@
         --rounding:   4px,
 
         --key-focus: (
-            --border: 4px,
+            --outline:       fn.dim(--border --thick, null),
+            --border:        fn.dim(--border --medium, null),
+            --border-offset: fn.dim(--border --medium, null),
         ),
 
         --paragraph: (
@@ -224,10 +227,20 @@
         ), $tree);
     }
 
-    @each $color, $ref in map.get($theme, --semantic) {
+    @each $color, $ref in config.$semantic-colors {
+        $res: ();
+
+        @if meta.type-of($ref) == 'map' {
+            @each $key, $r in $ref {
+                $res: map.set($res, $key, fn.color($r));
+            }
+        } @else {
+            $res: fn.color($ref);
+        }
+
         @include iro.props-store((
             --colors: (
-                $color: fn.color($ref),
+                $color: $res,
             ),
         ), $tree);
     }