switch back to outline, address feedback

Author: langermank

src/base/base.scss

@@ -93,26 +93,26 @@ details {
 // fallback :focus state
 :focus,
 .focus {
-  &:is(a, button, input, textarea) {
+  &:is(a, button, input, textarea, select) {
     @include focusOutline;
   }
 }
 
 // remove fallback :focus if :focus-visible is supported
-:focus:is(a, button, input, textarea):not(:focus-visible) {
+:focus:is(a, button, input, textarea, select):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
 // default :focus-visibile state
-:focus-visible:is(a, button, input, textarea) {
+:focus-visible:is(a, button, input, textarea, select) {
   @include focusOutline;
 }
 
 // remove offset for form fields
 :focus,
 :focus-visible {
-  &:is(input, textarea) {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 2px var(--color-accent-fg);
+  &:is(input, textarea, select) {
+    outline-offset: 0;
+    border-color: transparent;
   }
 }

src/buttons/misc.scss

@@ -37,7 +37,7 @@
   color: var(--color-accent-fg);
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
-  border-radius: 0;
+  border-radius: $border-radius;
   box-shadow: none;
 
   &:hover,

src/forms/input-group.scss

@@ -18,6 +18,13 @@
   &.inline {
     display: inline-table;
   }
+
+  // within input group, if button exists change focus styles to match input (no offset)
+  &:focus-within {
+    button {
+      outline-offset: 0;
+    }
+  }
 }
 
 .input-group .form-control,

src/support/mixins/misc.scss

@@ -26,12 +26,10 @@
 }
 
 // global focus styles
-// change to outline when Safari has better support
-// outline: 2px solid var(--color-accent-fg);
-// outline-offset: 2px;
+
 @mixin focusOutline {
   position: relative;
   z-index: 1;
-  outline: solid 1px transparent;
-  box-shadow: 0 0 0 2px var(--color-canvas-default), 0 0 0 4px var(--color-accent-fg);
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: 2px;
 }

src/utilities/details.scss

@@ -20,9 +20,21 @@
 
 .details-reset {
   // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
+  > summary {
+    list-style: none;
+  }
   // Remove marker added by details polyfill
-  > summary::before { display: none; }
+  > summary::before {
+    display: none;
+  }
   // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.details-overlay > summary {
+  &:focus {
+    @include focusOutline;
+  }
 }