switch offset to inset

Author: langermank

src/base/base.scss

@@ -113,12 +113,10 @@ select {
   }
 }
 
-input:not([type='radio'], [type='checkbox']),
-textarea,
-select {
+a {
   &:focus,
   &:focus-visible {
-    outline-offset: 0;
+    outline-offset: 2px;
   }
 }
 

src/buttons/button.scss

@@ -117,6 +117,21 @@
     border-color: var(--color-btn-primary-hover-border);
   }
 
+  // fallback :focus state
+  &:focus {
+    @include focusOutline(var(--color-fg-on-emphasis), -4px);
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline(var(--color-fg-on-emphasis), -4px);
+  }
+
   &:active,
   &.selected,
   &[aria-selected='true'] {

src/buttons/misc.scss

@@ -20,6 +20,11 @@
     text-decoration: underline;
   }
 
+  &:focus,
+  &:focus-visible {
+    outline-offset: 2px;
+  }
+
   &:disabled,
   &[aria-disabled='true'] {
     &,

src/support/mixins/misc.scss

@@ -27,7 +27,7 @@
 
 // global focus styles
 
-@mixin focusOutline {
-  outline: 2px solid var(--color-accent-fg);
-  outline-offset: 2px;
+@mixin focusOutline($outlineColor: var(--color-accent-fg), $outlineOffset: -2px) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
 }