Simplify focus styles

src/scss/_card.scss

@@ -260,11 +260,7 @@
     background: var(--card-image-placeholder, var(--placeholder-background));
     border-radius: var(--this-border-radius);
     overflow: hidden;
-
+    outline-offset: 2px;
-    &:focus-visible {
-      box-shadow: var(--in-focus-box-shadow);
-      outline: var(--in-focus-outline);
-    }
 
     img {
       position: absolute;

src/scss/_chapter.scss

@@ -241,7 +241,6 @@
       }
 
       &:focus-visible {
-        box-shadow: var(--in-focus-box-shadow-override, none) !important;
         opacity: 1;
       }
     }

src/scss/_follows.scss

@@ -55,6 +55,11 @@
   grid-template-rows: auto auto;
 }
 
+.follow-title {
+  padding: 0 2px; // Only for focus ring
+  margin: 0 -2px; // Compensate focus ring padding
+}
+
 .follow-title-link {
   grid-area: 1 / 1 / 2 / 2;
   font-weight: var(--font-weight-medium);
@@ -111,14 +116,6 @@
     font-size: var(--fs-xs);
     padding: .35rem .75rem .45rem;
 
-    &:has(a:focus-visible) {
-      background: var(--in-focus-background);
-
-      :is(.follow-placeholder, .follow-meta) {
-        color: var(--in-focus-color) !important;
-      }
-    }
-
     &:hover {
       background: var(--navigation-subitem-background-hover);
     }
@@ -132,11 +129,6 @@
   .follow-title-link {
     color: var(--follow-title-link-color, var(--fg-400));
 
-    &:focus-visible {
-      background: none !important;
-      box-shadow: var(--in-focus-box-shadow-override, none) !important;
-    }
-
     &:hover {
       color: var(--follow-title-link-color-hover, var(--fg-200));
     }

src/scss/_navigation.scss

@@ -216,10 +216,6 @@
     height: fit-content;
     transition: background-color .1s;
 
-    :is(a, label, button):focus-visible {
-      box-shadow: var(--in-focus-box-shadow-override, none) !important;
-    }
-
     &:not(:hover) {
       .sub-menu {
         pointer-events: none;

src/scss/_story.scss

@@ -85,6 +85,10 @@ $header_breakpoint: 640px;
     .story__taxonomies {
       grid-area: 2 / 2 / 3 / 3;
       align-self: center;
+
+      .tag-pill {
+        outline-offset: -1px;
+      }
     }
 
     .story__identity {
@@ -147,12 +151,7 @@ $header_breakpoint: 640px;
       display: block;
       border-radius: var(--layout-border-radius-small);
       box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
-
+      outline-offset: 2px;
-      &:focus-visible {
-        outline: none;
-        background: none;
-        box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
-      }
     }
 
     &:not(._in-content) {

src/scss/admin/_header.scss

@@ -69,10 +69,6 @@
       outline: none;
     }
 
-    &:focus-visible {
-      box-shadow: var(--in-focus-box-shadow);
-    }
-
     &:hover {
       background: var(--header-nav-item-background-hover);
       color: var(--header-nav-item-color-hover);
@@ -81,10 +77,6 @@
     &.active {
       background: var(--header-nav-item-background-active);
       color: var(--header-nav-item-color-active);
-
-      &:focus-visible {
-        box-shadow: var(--in-focus-box-shadow);
-      }
     }
   }
 }
@@ -128,11 +120,6 @@
       box-shadow: none;
       outline: none;
     }
-
-    &:focus-visible {
-      box-shadow: var(--in-focus-box-shadow);
-      outline: none;
-    }
   }
 
   .dashicons-plus {
@@ -159,11 +146,6 @@
       outline: none;
     }
 
-    &:focus-visible {
-      box-shadow: var(--in-focus-box-shadow);
-      outline: none;
-    }
-
     &:hover {
       color: var(--subnav-item-color-hover);
       border-bottom-color: var(--subnav-item-border-color-hover);
@@ -173,10 +155,6 @@
       color: var(--subnav-item-color-active);
       font-weight: 600;
       border-bottom-color: var(--subnav-item-border-color-active);
-
-      &:focus-visible {
-        box-shadow: var(--in-focus-box-shadow);
-      }
     }
   }
 }

src/scss/admin/_properties.scss

@@ -1,6 +1,4 @@
 body[class*="page_fictioneer"] {
-  --focus-color: #ef4d4d;
-  --in-focus-box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, .8);
   --highlight-color: #72aee6;
 
   --header-heading-color: #fff;

src/scss/common/_base.scss

@@ -148,6 +148,7 @@
   width: fit-content;
   min-width: get_clamp(26, 32, 320, 375);
   box-shadow: var(--button-box-shadow);
+  outline-offset: 3px;
   transition: color, background-color, border-color, opacity;
   transition-duration: var(--transition-duration);
 
@@ -178,11 +179,6 @@ button[type=submit]:where(:not(._inline)),
 .button {
   @extend %button;
 
-  &:is(button, a, label):focus-visible {
-    color: var(--in-focus-color) !important;
-    box-shadow: var(--in-focus-box-shadow-override, none) !important;
-  }
-
   &._secondary {
     background: var(--button-secondary-background);
     color: var(--button-secondary-color);
@@ -329,10 +325,6 @@ button[type=submit]:where(:not(._inline)),
     text-shadow: none;
     width: fit-content;
     contain: layout paint style; // Improve performance
-
-    &:focus-visible {
-      box-shadow: var(--in-focus-box-shadow-override, none) !important;
-    }
   }
 
   &:not(._inline):hover {
@@ -744,10 +736,6 @@ html:not(.logged-in) body:not(.logged-in) {
         padding: 4px;
         margin-right: -4px;
 
-        &:focus-visible.marked {
-          color: var(--in-focus-color);
-        }
-
         &:not(.marked) {
           color: var(--checkmark-not-checked);
           text-shadow: none;

src/scss/common/_lightmode.scss

@@ -162,13 +162,6 @@
   --card-footer-icon-color: var(--fg-800);
   --card-text-icon-color: var(--fg-600);
 
-  // === FOCUS =================================================================
-
-  // --in-focus-color: white;
-  // --in-focus-outline: none;
-  --in-focus-background: #5593f6;
-  // --in-focus-box-shadow: 0 0 0 3px var(--in-focus-background);
-
   // === NAVIGATION ============================================================
 
   --navigation-background: var(--bg-50);

src/scss/common/_properties.scss

@@ -292,13 +292,6 @@
   --card-unavailable-filter: grayscale(0.5) blur(1.5px);
   --card-frame-border-color: var(--bg-800);
 
-  // === FOCUS =================================================================
-
-  --in-focus-color: white;
-  --in-focus-outline: none;
-  --in-focus-background: #ef4d4d;
-  --in-focus-box-shadow: 0 0 0 3px var(--in-focus-background);
-
   // === NAVIGATION ============================================================
 
   --navigation-background: var(--bg-900);

src/scss/common/_setup.scss

@@ -9,49 +9,16 @@ html:is(:root) {
   -webkit-tap-highlight-color: transparent;
 }
 
-:focus {
-  outline: none;
-}
-
 [hidden] {
   display: none !important;
 }
 
-*:not(input, textarea, select, .wp-block-file a, .button-unset-oauth, .toggle):focus-visible,
+body:where(:not(.user-is-tabbing)) :is(input, select, textarea):focus {
-input:is([type=checkbox], [type=radio], [type=range], [type=submit]):focus-visible,
-.user-is-tabbing select:focus-visible,
-.oauth-login-link button:focus-visible,
-.user-is-tabbing .showcase li:focus-within,
-.custom-skin._upload:focus-within,
-:is(.button, .comment-respond-option-toggle):focus-visible,
-.wp-block-file:focus-within a:focus-visible {
-  outline-offset: var(--in-focus-outline-offset, 0px);
-  outline: var(--in-focus-outline) !important;
-  background: var(--in-focus-background) !important;
-}
-
-a:focus-visible img,
-.wp-block-image img[data-lightbox]:focus-visible,
-.toggle:focus-visible {
-  outline-offset: var(--in-focus-outline-offset, 0px);
-  outline: var(--in-focus-outline) !important;
-  box-shadow: var(--in-focus-box-shadow);
-}
-
-.user-is-tabbing *:not(.checkmark, select, input, textarea):focus-visible,
-.user-is-tabbing select:focus-visible {
-  color: var(--in-focus-color) !important;
-}
-
-body:not(.user-is-tabbing) :is(.modal__close, .dialog-modal__close) {
   outline: none;
 }
 
-#wpadminbar {
+body:where(.user-is-tabbing) :is(input, select, textarea):focus {
-  --in-focus-background: #2c3338;
+  outline-offset: 3px;
-  --in-focus-color: #72aee6;
-  --in-focus-box-shadow: none;
-  --in-focus-outline: none;
 }
 
 body {

src/scss/common/_tabs.scss

@@ -26,10 +26,6 @@
       text-shadow: var(--tab-text-shadow-hover, var(--tab-text-shadow));
     }
 
-    &:focus-visible {
-      box-shadow: var(--in-focus-box-shadow-override, none) !important;
-    }
-
     &._current {
       background: var(--tab-background-active);
       color: var(--tab-color-active);

src/scss/common/_utility.scss

@@ -287,7 +287,8 @@ body:not(.is-editor):not(.is-admin) {
   }
 
   @include bp(desktop) {
-    &:hover {
+    &:hover,
+    &:focus {
       &::before {
         opacity: 1;
       }