tweak outline offset

src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss

@@ -217,6 +217,6 @@ $link-hover-decoration-thickness: string.unquote(
   &:focus-visible {
     box-shadow: none; // override Bootstrap
     outline: 3px solid var(--pst-color-accent);
-    outline-offset: 3px;
+    outline-offset: $focus-ring-width;
   }
 }

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

@@ -327,7 +327,8 @@ details.sd-dropdown {
     // Focus ring
     &:focus:focus-visible {
       outline: $focus-ring-outline;
-      outline-offset: $focus-ring-width;
+      outline-offset: $focus-ring-offset;
+      border-radius: $focus-ring-width;
     }
   }
 }
@@ -360,14 +361,16 @@ html {
     .sd-btn-#{$name},
     .sd-btn-outline-#{$name} {
       &:focus-visible {
+        outline: var(--sd-color-#{$name}) solid $focus-ring-width;
+        outline-offset: $focus-ring-offset;
+        border-radius: $focus-ring-width;
+
         // Override Sphinx Design's use of -highlight colors. The -highlight
         // colors are 15% darker, so this would create the effect of darkening
         // the button when focused but we just want the button to have a focus
         // ring of the same (non-highlight) color.
         background-color: var(--sd-color-#{$name}) !important;
         border-color: var(--sd-color-#{$name}) !important;
-        outline: var(--sd-color-#{$name}) solid $focus-ring-width;
-        outline-offset: $focus-ring-width;
       }
     }
   }

src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss

@@ -98,7 +98,7 @@
         width: calc(100% + $admonition-left-border-width);
         height: 100%;
         outline: $focus-ring-outline;
-        outline-offset: $focus-ring-width;
+        outline-offset: $focus-ring-offset;
         border-radius: $focus-ring-width;
       }
 
@@ -121,7 +121,7 @@
       @include hover-darken-lighten;
 
       &:focus-visible {
-        outline-offset: $focus-ring-width;
+        outline-offset: $focus-ring-offset;
       }
     }
 

src/pydata_sphinx_theme/assets/styles/variables/_bootstrap.scss

@@ -26,6 +26,12 @@ $focus-ring-color: var(--pst-color-accent);
 $focus-ring-blur: 0;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
 
+// For many elements, we do not use an offset. For some we set the offset equal
+// to the focus ring width (either outwards or inwards). But for some other
+// elements (e.g., collapsible admonitions) we set the `outline-offset` to this
+// value.
+$focus-ring-offset: 0.125rem; // 2px at 100% zoom (0.125 * 16px base font = 2px)
+
 // outline creates the same style of focus ring, it just uses CSS outline instead of box shadow
 $focus-ring-outline: $focus-ring-color solid $focus-ring-width;
 $btn-focus-box-shadow: $focus-ring-box-shadow;