Update tab focus styles

css/recommendation.css

@@ -1 +1 @@
-.recommendation__header{margin-bottom:2rem}.recommendation__taxonomies{margin-bottom:1.5rem}.recommendation__thumbnail{--focus-offset: 2px;float:right;max-width:clamp(100px,25.4452926209vw + 4.5801526718px,200px);margin:0 0 clamp(10px,9.6692111959vw - 26.2595419847px,48px) clamp(24px,6.106870229vw + 1.0992366412px,48px)}.recommendation__thumbnail :is(a,img){display:block;cursor:zoom-in;border-radius:var(--layout-border-radius-small)}.recommendation__thumbnail-image{width:inherit;box-shadow:var(--recommendation-cover-box-shadow, var(--box-shadow-xl))}@media(max-width: 768px){.recommendation__thumbnail-image{height:auto}}.recommendation__tags{margin:2rem 0 3rem}.recommendation__support,.recommendation__read-on{margin-top:1.5rem}.recommendation__support h5,.recommendation__read-on h5{margin-bottom:.5rem}.recommendation__support :is(i,.icon),.recommendation__read-on :is(i,.icon){color:var(--fg-600);margin-right:.5rem}.recommendation__list-item{line-height:1.3}.recommendation__list-item:not(:last-child){margin-bottom:.5rem}.recommendation__footer{clear:both}
+.recommendation__header{margin-bottom:2rem}.recommendation__taxonomies{margin-bottom:1.5rem}.recommendation__thumbnail{float:right;max-width:clamp(100px,25.4452926209vw + 4.5801526718px,200px);margin:0 0 clamp(10px,9.6692111959vw - 26.2595419847px,48px) clamp(24px,6.106870229vw + 1.0992366412px,48px)}.recommendation__thumbnail :is(a,img){display:block;cursor:zoom-in;border-radius:var(--layout-border-radius-small)}.recommendation__thumbnail-image{width:inherit;box-shadow:var(--recommendation-cover-box-shadow, var(--box-shadow-xl))}@media(max-width: 768px){.recommendation__thumbnail-image{height:auto}}.recommendation__tags{margin:2rem 0 3rem}.recommendation__support,.recommendation__read-on{margin-top:1.5rem}.recommendation__support h5,.recommendation__read-on h5{margin-bottom:.5rem}.recommendation__support :is(i,.icon),.recommendation__read-on :is(i,.icon){color:var(--fg-600);margin-right:.5rem}.recommendation__list-item{line-height:1.3}.recommendation__list-item:not(:last-child){margin-bottom:.5rem}.recommendation__footer{clear:both}

src/scss/_card.scss

@@ -166,7 +166,6 @@
     }
 
     a {
-      --focus-offset: 1px;
       color: var(--card-heading-link, var(--heading-link-color));
       width: fit-content;
 
@@ -188,7 +187,6 @@
 
   &__delete,
   &__info-toggle {
-    --focus-offset: -8px;
     cursor: pointer;
     position: absolute;
     top: 0;
@@ -256,7 +254,6 @@
   }
 
   &__image {
-    --focus-offset: 2px;
     --this-border-radius: var(--layout-border-radius-small);
     position: relative;
     display: block;
@@ -395,12 +392,6 @@
       @include bp(desktop) {
         padding: 0.175em 0.35em 0.175em 0;
       }
-
-      @supports selector(:has(:focus-visible)) {
-        a:focus-visible {
-          outline: none;
-        }
-      }
     }
 
     &-link {

src/scss/_chapter.scss

@@ -235,11 +235,15 @@
       height: 32px;
       opacity: .5;
 
-      &:hover,
+      &:hover {
-      &:focus-visible {
         background: var(--button-secondary-background-hover);
         opacity: 1;
       }
+
+      &:focus-visible {
+        box-shadow: var(--in-focus-box-shadow-override, none) !important;
+        opacity: 1;
+      }
     }
 
     .icon {

src/scss/_follows.scss

@@ -58,12 +58,6 @@
 .follow-title-link {
   grid-area: 1 / 1 / 2 / 2;
   font-weight: var(--font-weight-medium);
-
-  @supports selector(:has(:focus-visible)) {
-    &:focus-visible {
-      outline: none;
-    }
-  }
 }
 
 .follow-meta {
@@ -100,8 +94,6 @@
   }
 
   .follow-item {
-    --focus-offset: -2px;
-
     &:not(:last-child) {
       border-bottom: var(--navigation-subitem-divider);
     }
@@ -119,6 +111,14 @@
     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);
     }
@@ -130,9 +130,13 @@
   }
 
   .follow-title-link {
-    --in-focus-outline: none;
     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/_lightbox.scss

@@ -15,7 +15,6 @@
   }
 
   &__close {
-    --focus-offset: -12px;
     position: absolute;
     top: -0.5rem;
     right: -0.5rem;

src/scss/_navigation.scss

@@ -98,7 +98,6 @@
 }
 
 .main-navigation {
-  --focus-offset: -2px;
   top: calc(-0.1px - var(--nav-observer-offset, 0px)); // -0.1px to prevent hairline gaps
   z-index: 1000;
   color: var(--navigation-color);
@@ -217,6 +216,10 @@
     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;
@@ -374,17 +377,6 @@
 .user-is-tabbing {
   :is(.main-navigation, .icon-menu) {
     :is(.menu-item, .page_item) {
-      :where(a, label, button):focus-visible {
-        color: var(--navigation-color-hover);
-        background: var(--navigation-item-background-hover);
-      }
-
-      .sub-menu {
-        :where(a, label, button):focus-visible {
-          color: var(--navigation-subitem-color-hover, var(--navigation-color-hover));
-        }
-      }
-
       &:focus-within {
         background: var(--navigation-item-background-hover);
 

src/scss/_pagination.scss

@@ -6,7 +6,6 @@
   grid-column: 1 / -1; // Span all grid columns if any
 
   .page-numbers {
-    --focus-offset: -2px;
     @extend %button;
     background: var(--pagination-background);
     color: var(--pagination-color);

src/scss/_profile.scss

@@ -101,7 +101,6 @@
     margin: 2rem 0;
 
     .oauth-login-link {
-      --focus-offset: -2px;
       position: relative;
       display: flex;
       flex-direction: column;

src/scss/_reader-settings.scss

@@ -42,7 +42,6 @@
   }
 
   &__toggle {
-    --focus-offset: 2px;
     border-radius: 50%;
 
     &[aria-checked="true"] {

src/scss/_recommendation.scss

@@ -8,7 +8,6 @@
   }
 
   &__thumbnail {
-    --focus-offset: 2px;
     float: right;
     max-width: get_clamp(100, 200, 375, 768);
     margin: 0 0 get_clamp(10, 48, 375, 768) get_clamp(24, 48, 375, 768);

src/scss/_showcase.scss

@@ -33,7 +33,6 @@
   }
 
   &__list-item {
-    --focus-offset: 2px;
     position: relative;
     aspect-ratio: var(--showcase-item-aspect-ratio);
     border-radius: var(--layout-border-radius-small);
@@ -71,10 +70,6 @@
     display: block;
     height: 100%;
 
-    &:focus-visible {
-      outline: none;
-    }
-
     &:hover {
       img {
         transform: scale(1.05);

src/scss/_socialmedia.scss

@@ -3,7 +3,6 @@
   gap: 16px get_clamp(12, 16, 320, 480);
 
   &__item {
-    --focus-offset: 1px;
     cursor: pointer;
     display: block;
     color: (--media-button-color, var(--fg-600));

src/scss/_story.scss

@@ -143,7 +143,17 @@ $header_breakpoint: 640px;
   }
 
   &__thumbnail {
-    --focus-offset: 2px;
+    a {
+      display: block;
+      border-radius: var(--layout-border-radius-small);
+      box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
+
+      &:focus-visible {
+        outline: none;
+        background: none;
+        box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
+      }
+    }
 
     &:not(._in-content) {
       grid-area: 1 / 1 / 4 / 2;
@@ -185,7 +195,6 @@ $header_breakpoint: 640px;
       height: 100%;
       max-height: var(--this-img-height);
       object-fit: cover;
-      box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
     }
   }
 

src/scss/comments.scss

@@ -12,7 +12,6 @@
 }
 
 .comment-respond-option-toggle {
-  --focus-offset: -2px;
   display: block;
 
   span {
@@ -463,7 +462,6 @@
   }
 
   &__author {
-    --focus-offset: -2px;
     font-size: 13px;
     line-height: 1.2;
     padding-top: 2px;

src/scss/common/_base.scss

@@ -176,11 +176,11 @@ button[type=submit]:where(:not(._inline)),
 }
 
 .button {
-  --focus-offset: -2px;
   @extend %button;
 
-  &:focus-visible {
+  &:is(button, a, label):focus-visible {
-    box-shadow: var(--in-focus-box-shadow);
+    color: var(--in-focus-color) !important;
+    box-shadow: var(--in-focus-box-shadow-override, none) !important;
   }
 
   &._secondary {
@@ -319,7 +319,6 @@ button[type=submit]:where(:not(._inline)),
   cursor: pointer;
 
   &:not(._inline) {
-    --focus-offset: -2px;
     display: block;
     background: var(--tag-background);
     color: var(--tag-color);
@@ -332,7 +331,7 @@ button[type=submit]:where(:not(._inline)),
     contain: layout paint style; // Improve performance
 
     &:focus-visible {
-      box-shadow: var(--in-focus-box-shadow);
+      box-shadow: var(--in-focus-box-shadow-override, none) !important;
     }
   }
 
@@ -479,7 +478,6 @@ button[type=submit]:where(:not(._inline)),
 .popup-menu {
   --translateX: translateX(0);
   --translateY: translateY(0);
-  --focus-offset: -2px;
   position: absolute;
   z-index: 10;
   background: var(--popup-menu-background);
@@ -697,7 +695,6 @@ html:not(.logged-in) body:not(.logged-in) {
       }
 
       &-link {
-        --focus-offset: 1px;
         grid-area: 1 / 2 / 2 / 3;
         color: var(--chapter-list-link-color, var(--heading-link-color));
         font-family: var(--ff-chapter-list-title);
@@ -739,7 +736,6 @@ html:not(.logged-in) body:not(.logged-in) {
       }
 
       .checkmark {
-        --focus-offset: 2px;
         grid-area: 1 / 3 / 3 / 4;
         display: block;
         color: var(--checkmark-checked);

src/scss/common/_blocks.scss

@@ -605,7 +605,6 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
 // =============================================================================
 
 .wp-block-file:where(:not(.no-theme-style)) {
-  --focus-offset: 2px;
   display: flex;
   gap: 0 1px;
   flex-direction: row-reverse;
@@ -625,12 +624,6 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
     }
   }
 
-  &:focus-within {
-    a:focus-visible {
-      outline: none;
-    }
-  }
-
   &:hover :is(a, a.wp-block-file__button) {
     background: var(--button-file-block-background-hover);
     color: var(--button-file-block-color-hover) !important;

src/scss/common/_inputs.scss

@@ -12,7 +12,6 @@
 }
 
 select {
-  --focus-offset: -2px;
   cursor: pointer;
 
   option {
@@ -96,7 +95,6 @@ select {
 }
 
 input[type=range] {
-  --focus-offset: -2px;
   cursor: pointer;
   padding: 5px;
   margin: 0;
@@ -148,7 +146,6 @@ input[type=number] {
 
 input[type=checkbox],
 input[type=radio] {
-  --focus-offset: 2px;
   cursor: pointer;
   position: relative;
   background: var(--input-background);
@@ -227,7 +224,6 @@ input[type=radio] {
   }
 
   &__operator {
-    --focus-offset: -2px;
     --this-border-radius: var(--input-border-radius, var(--layout-border-radius-small));
     position: absolute;
     top: 0;

src/scss/common/_lightmode.scss

@@ -164,9 +164,10 @@
 
   // === FOCUS =================================================================
 
-  --in-focus-border-color: var(--red-500);
+  // --in-focus-color: white;
-  // --in-focus-outline: 2px solid var(--in-focus-border-color);
+  // --in-focus-outline: none;
-  --in-focus-box-shadow: inset 0 0 0 2px rgb(255 255 255 / 75%);
+  --in-focus-background: #5593f6;
+  // --in-focus-box-shadow: 0 0 0 3px var(--in-focus-background);
 
   // === NAVIGATION ============================================================
 

src/scss/common/_modals.scss

@@ -238,7 +238,6 @@
 
 .dialog-modal__close,
 .modal .close {
-  --focus-offset: -4px;
   position: absolute;
   top: 0;
   right: 0;

src/scss/common/_properties.scss

@@ -294,9 +294,10 @@
 
   // === FOCUS =================================================================
 
-  --in-focus-border-color: #ef4d4d;
+  --in-focus-color: white;
-  --in-focus-outline: 2px solid var(--in-focus-border-color);
+  --in-focus-outline: none;
-  --in-focus-box-shadow: inset 0 0 0 2px rgb(0 0 0 / 75%);
+  --in-focus-background: #ef4d4d;
+  --in-focus-box-shadow: 0 0 0 3px var(--in-focus-background);
 
   // === NAVIGATION ============================================================
 

src/scss/common/_setup.scss

@@ -17,32 +17,36 @@ html:is(:root) {
   display: none !important;
 }
 
-*:not(input, textarea, select, .wp-block-file a, .button-unset-oauth):focus-visible,
+*:not(input, textarea, select, .wp-block-file a, .button-unset-oauth, .toggle):focus-visible,
 input:is([type=checkbox], [type=radio], [type=range], [type=submit]):focus-visible,
 .user-is-tabbing select:focus-visible,
-.button:focus-visible,
 .oauth-login-link button:focus-visible,
-.story__thumbnail a:focus-visible img,
 .user-is-tabbing .showcase li:focus-within,
-.comment-respond-option-toggle:focus-visible {
+.custom-skin._upload:focus-within,
-  outline: var(--in-focus-outline);
+:is(.button, .comment-respond-option-toggle):focus-visible,
-  outline-offset: var(--focus-offset, 0);
+.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;
+  box-shadow: var(--in-focus-box-shadow);
 }
 
-// Split off for browsers without support
+input:is([type=checkbox], [type=radio], [type=range], [type=submit]):focus-visible,
-@supports selector(:has(:focus-visible)) {
+:is(select, button, .oauth-login-link):not(.toggle):focus-visible,
-  .wp-block-file:has(a:focus-visible),
+.custom-skin._upload:focus-within,
-  .card__link-list li:has(a:focus-visible),
+.wp-block-file:focus-within a {
-  .oauth-login-link:has(:focus-visible),
+  box-shadow: var(--in-focus-box-shadow-override, none) !important;
-  .follow-item:has(:focus-visible)  {
+}
-    outline: var(--in-focus-outline);
-    outline-offset: var(--focus-offset, 0);
-  }
 
-  // Prevent double outline
+a:focus-visible img,
-  .oauth-login-link button:focus-visible {
+.toggle:focus-visible {
-    outline: none;
+  outline-offset: var(--in-focus-outline-offset, 0px);
-  }
+  outline: var(--in-focus-outline) !important;
+  box-shadow: var(--in-focus-box-shadow);
+}
+
+*:not(.checkmark):focus-visible {
+  color: var(--in-focus-color) !important;
 }
 
 body:not(.user-is-tabbing) :is(.modal__close, .dialog-modal__close) {
@@ -70,7 +74,6 @@ body {
 
 main {
   img {
-    --focus-offset: 2px;
     max-width: 100%;
     max-height: 100%;
   }

src/scss/common/_tabs.scss

@@ -8,7 +8,6 @@
   }
 
   &__item {
-    --focus-offset: -2px;
     background: var(--tab-background);
     color: var(--tab-color);
     font-size: var(--fs-dxs);
@@ -28,7 +27,7 @@
     }
 
     &:focus-visible {
-      box-shadow: var(--in-focus-box-shadow);
+      box-shadow: var(--in-focus-box-shadow-override, none) !important;
     }
 
     &._current {

src/scss/common/_utility.scss

@@ -69,7 +69,6 @@ body:not(.is-editor):not(.is-admin) {
 }
 
 .truncate {
-  --focus-offset: -2px;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;