fix: add box shadow instead of outline for all focusable elements and some spacing to the elements (#552)

This PR improves focus visibility

**Issues**
- The search and source repository buttons lacked visible focus
indicators.
- The theme toggle button had a low-contrast focus style in dark mode.
- Default outline styles used system/WebKit colors, resulting in
inconsistent rendering across browsers.
- Some focus outlines were obscured due to insufficient spacing around
elements.

**Changes**
- Replaced default outline with custom box-shadow styles, using
accessible colors for both light and dark themes.
- Removed the default hover outline effect on the theme toggle button to
improve visual consistency.
- Added padding/margin adjustments to ensure focus indicators remain
visible.
- Verified styles work across Chrome/Firefox.



https://github.com/user-attachments/assets/a8a03791-931c-4e97-9559-da26ee4e1a45


Closes #536, #534

Author: cuteshaun

docs/_includes/header_custom.html

@@ -1,6 +1,12 @@
-<button class="btn js-toggle-dark-mode" aria-label="Switch to light mode">
-  ☼
-</button>
+<div class="js-toggle-dark-mode-wrapper">
+  <button
+    class="btn js-toggle-dark-mode"
+    aria-label="Switch to light mode"
+    type="button"
+  >
+    ☼
+  </button>
+</div>
 
 <script>
   const toggleDarkMode = document.querySelector(".js-toggle-dark-mode");

docs/_sass/custom/custom.scss

@@ -1,3 +1,11 @@
+:root {
+  --outline-color: #{$outline-color-light};
+}
+
+[data-theme="dark"] {
+  --outline-color: #{$outline-color-dark};
+}
+
 html,
 body {
   height: 100%;
@@ -29,7 +37,7 @@ div.site-logo {
   color: $body-text-color;
 }
 
-//Dark mode link styles
+// Dark mode link styles
 html[data-theme="dark"] {
   .main-header a,
   .main-header button,
@@ -56,7 +64,7 @@ html[data-theme="dark"] {
   }
 }
 
-//Label colors
+// Label colors
 main {
   .label-green {
     background-color: $label-success-bg;
@@ -66,3 +74,33 @@ main {
     background-color: $label-error-bg;
   }
 }
+
+// Outline styles
+.search:focus-within,
+.btn:focus,
+.btn:active,
+.btn:focus:hover,
+a:focus-visible,
+summary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--outline-color);
+  border-radius: 2px;
+  transition: box-shadow 0.2s ease;
+}
+
+.aux-nav .aux-nav-list-item {
+  padding: 5px;
+}
+
+.nav-list-item {
+  padding-left: 1px;
+  padding-right: 1px;
+}
+
+.js-toggle-dark-mode {
+  height: 100%;
+}
+
+.js-toggle-dark-mode-wrapper {
+  padding: 5px;
+}

docs/_sass/custom/setup.scss

@@ -2,8 +2,12 @@
 $blue-400: #4da6ff;
 $green-700: #00755c;
 $red-600: #d13c3c;
+$purple-500: rgba(215, 186, 255, 0.65);
+$lavender: #b69cff;
 
 // Semantic mappings
 $link-color-dark: $blue-400;
 $label-success-bg: $green-700;
 $label-error-bg: $red-600;
+$outline-color-light: $lavender;
+$outline-color-dark: $purple-500;