fix: add box shadow instead of outline for all focusable elements, add some extra spacing to the elements

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%;
@@ -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;