From cf97b062b63675ace395955c16ef94968f4132a5 Mon Sep 17 00:00:00 2001
From: facelessuser <faceless.shop@gmail.com>
Date: Sun, 19 Nov 2023 12:18:24 -0700
Subject: [PATCH] Docs: Fix some focus issues

- For now, patch detail/admonition focus style to match our style colors
- Dark mode focus ring should not have a double rings, one being white
---
 docs/src/scss/_general.scss               |  4 ++++
 docs/src/scss/extensions/_admonition.scss | 16 ++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/docs/src/scss/_general.scss b/docs/src/scss/_general.scss
index df2a4bff5..0248cc6b6 100644
--- a/docs/src/scss/_general.scss
+++ b/docs/src/scss/_general.scss
@@ -3,6 +3,10 @@
   --md-heart: #{$clr-red-a200};
   --md-heart-big: #{$clr-red-a400};
 
+  :focus-visible {
+    outline-style: solid;
+  }
+
   /* Dark mode colors */
   [data-md-color-scheme="dracula"] {
     --md-heart: #{$drac-pink};
diff --git a/docs/src/scss/extensions/_admonition.scss b/docs/src/scss/extensions/_admonition.scss
index a2fed2cfb..82bd9499c 100644
--- a/docs/src/scss/extensions/_admonition.scss
+++ b/docs/src/scss/extensions/_admonition.scss
@@ -39,10 +39,12 @@ $new-admonitions: (
     --md-admonition-icon--#{$name}: svg-load("#{nth($prop, 3)}");
     --md-admonition-bg-color--#{$name}: #{transparentize($tint2, 0.9)};
     --md-admonition-icon-color--#{$name}: #{$tint2};
+    --md-admonition-shadow-color--#{$name}: #{transparentize($tint2, 0.9)};
 
     &[data-md-color-scheme="dracula"] {
       --md-admonition-bg-color--#{$name}: var(--md-default-bg-color--ultra-dark);
       --md-admonition-icon-color--#{$name}: #{$tint};
+      --md-admonition-shadow-color--#{$name}: #{transparentize($tint, 0.9)};
     }
   }
 
@@ -50,12 +52,18 @@ $new-admonitions: (
     $name: nth($names, 1);
     --md-admonition-bg-color--#{$name}: var(--md-default-bg-color--ultra-dark);
     --md-admonition-icon-color--#{$name}: #{$tint};
+    --md-admonition-shadow-color--#{$name}: #{transparentize($tint, 0.9)};
   }
 }
 
 /* Dark mode changes */
 [data-md-color-scheme="dracula"] .md-typeset .admonition {
   border-color: var(--md-admonition-icon-color--note);
+
+  &:focus-within {
+    box-shadow: 0 0 0 px2rem(4px) var(--md-admonition-shadow-color--note);
+  }
+
   > .admonition-title {
     background-color: var(--md-admonition-bg-color--note);
     &::before {
@@ -80,6 +88,10 @@ $new-admonitions: (
     .md-typeset .admonition.#{$name} {
       border-color: var(--md-admonition-icon-color--#{$name});
 
+      &:focus-within {
+        box-shadow: 0 0 0 px2rem(4px) var(--md-admonition-shadow-color--#{$name});
+      }
+
       // Define base class
       > .admonition-title {
         background-color: var(--md-admonition-bg-color--#{$name});
@@ -113,6 +125,10 @@ $new-admonitions: (
   .md-typeset .admonition.#{$name} {
     border-color: var(--md-admonition-icon-color--#{$name});
 
+    &:focus-within {
+      box-shadow: 0 0 0 px2rem(4px) var(--md-admonition-shadow-color--#{$name});
+    }
+
     > .admonition-title {
       background-color: var(--md-admonition-bg-color--#{$name});
       border-color: var(--md-admonition-icon-color--#{$name});