Fix primary button focus styles

primer · Apr 4, 2022 · 851a40c · 851a40c
1 parent 60015eb
commit 851a40c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 153 deletions.
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
@@ -58,10 +58,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       },
       ...fallbackFocus,
       '&:focus-visible:not([disabled])': {
-        outline: '2px solid',
-        outlineOffset: '0',
-        outlineColor: 'accent.fg',
-        boxShadow: 'inset 0 0 0 2px'
+        ...focusOutlineStyles,
+        boxShadow: 'inset 0 0 0 3px'
       },
       '&:active:not([disabled])': {
         backgroundColor: 'btn.primary.selectedBg',

diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -687,9 +687,9 @@ exports[`Button styles primary button appropriately 1`] = `
 
 .c0:focus-visible:not([disabled]) {
   outline: 2px solid;
-  outline-offset: 0;
   outline-color: accent.fg;
-  box-shadow: inset 0 0 0 2px;
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 3px;
 }
 
 .c0:active:not([disabled]) {

diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -133,8 +133,6 @@ exports[`renders consistently 1`] = `
   width: 64px;
   outline-offset: 2px;
   position: relative;
-  background-color: #eaeef2;
-  border-color: #afb8c1;
 }
 
 .c4:after {
@@ -162,7 +160,6 @@ exports[`renders consistently 1`] = `
   background-color: #f6f8fa;
   border-width: 1px;
   border-style: solid;
-  border-color: #afb8c1;
   border-radius: calc(6px - 1px);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15),inset 0 1px 0 rgba(255,255,255,0.25);
   width: 50%;