From e9c8686f45bd1233f4149ea7fc15bb8515a71c5a Mon Sep 17 00:00:00 2001
From: CuteShaun <andrewtsapko@gmail.com>
Date: Mon, 16 Jun 2025 13:46:52 -0700
Subject: [PATCH 1/2] fix: add box shadow instead of outline for all focusable
 elements, add some extra spacing to the elements

---
 docs/_includes/header_custom.html | 12 +++++++---
 docs/_sass/custom/custom.scss     | 38 +++++++++++++++++++++++++++++++
 docs/_sass/custom/setup.scss      |  4 ++++
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
index 9ca7f8c5..1b664ce3 100644
--- a/docs/_includes/header_custom.html
+++ b/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");
diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index e4c36045..67fd71be 100644
--- a/docs/_sass/custom/custom.scss
+++ b/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;
+}
diff --git a/docs/_sass/custom/setup.scss b/docs/_sass/custom/setup.scss
index 98e97982..ee4e35ca 100644
--- a/docs/_sass/custom/setup.scss
+++ b/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;

From 126f63fe83465dc174fb0e599e3c9b98f07eec07 Mon Sep 17 00:00:00 2001
From: CuteShaun <andrewtsapko@gmail.com>
Date: Tue, 17 Jun 2025 09:16:54 -0700
Subject: [PATCH 2/2] fix: add spaces to css comments

---
 docs/_sass/custom/custom.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index 67fd71be..d6922e2e 100644
--- a/docs/_sass/custom/custom.scss
+++ b/docs/_sass/custom/custom.scss
@@ -37,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,
@@ -64,7 +64,7 @@ html[data-theme="dark"] {
   }
 }
 
-//Label colors
+// Label colors
 main {
   .label-green {
     background-color: $label-success-bg;
@@ -75,7 +75,7 @@ main {
   }
 }
 
-//Outline styles
+// Outline styles
 .search:focus-within,
 .btn:focus,
 .btn:active,