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
facelessuser · Nov 19, 2023 · cf97b06 · cf97b06
1 parent 054f84b
commit cf97b06
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git 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
@@ -39,23 +39,31 @@ $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)};
     }
   }
 
   @each $names, $tint in $old-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});