From deda0d01ae55feeda0376ddc77ed35e9e9b85930 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 2 Nov 2021 11:35:33 -0700
Subject: [PATCH 01/45] setup base focus styles

---
 docs/yarn.lock               |  4 +--
 src/base/base.scss           | 25 ++++++++++++--
 src/base/normalize.scss      | 64 +++++++-----------------------------
 src/buttons/button.scss      | 58 ++++++++++++++++----------------
 src/buttons/misc.scss        | 16 +++++----
 src/support/mixins/misc.scss |  9 ++++-
 6 files changed, 84 insertions(+), 92 deletions(-)

diff --git a/docs/yarn.lock b/docs/yarn.lock
index badf885864..d0bf1b4e28 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -297,7 +297,7 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-validator-identifier@^7.15.7":
+"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.15.7":
   version "7.15.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
@@ -1168,7 +1168,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.10.5", "@babel/types@^7.12.11", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.16.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.10.5", "@babel/types@^7.12.11", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
   integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
diff --git a/src/base/base.scss b/src/base/base.scss
index 47f6fd73a0..796d0f0c0c 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -76,10 +76,31 @@ button {
 }
 
 details {
-  summary { cursor: pointer; }
+  summary {
+    cursor: pointer;
+  }
 
   &:not([open]) {
     // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) { display: none !important; }
+    > *:not(summary) {
+      display: none !important;
+    }
   }
 }
+
+// global focus styles
+
+// fallback :focus state
+:focus:is(a, button, input, textarea) {
+  @include focusOutline;
+}
+
+// remove fallback :focus if :focus-visible is supported
+:focus:is(a, button, input, textarea):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+// default :focus-visibile state
+:focus-visible:is(a, button, input, textarea) {
+  @include focusOutline;
+}
diff --git a/src/base/normalize.scss b/src/base/normalize.scss
index 6a1e3c10e9..35001da669 100644
--- a/src/base/normalize.scss
+++ b/src/base/normalize.scss
@@ -39,7 +39,8 @@ header,
 main, /* 2 */
 menu,
 nav,
-section { /* 1 */
+section {
+  /* 1 */
   display: block;
 }
 
@@ -96,16 +97,6 @@ a {
   background-color: transparent; /* 1 */
 }
 
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -278,7 +269,8 @@ optgroup {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -288,7 +280,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -305,29 +298,6 @@ html [type="button"], /* 1 */
   -webkit-appearance: button; /* 2 */
 }
 
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
@@ -367,8 +337,8 @@ textarea {
  * 2. Remove the padding in IE 10-.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -377,27 +347,17 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 0f239acabf..bfc32fe39f 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -24,7 +24,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     cursor: default;
   }
 
@@ -84,14 +84,14 @@
   }
 
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     background-color: var(--color-btn-selected-bg);
     box-shadow: var(--color-primer-shadow-inset);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-btn-bg);
     border-color: var(--color-btn-border);
@@ -102,12 +102,12 @@
   }
 
   // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
-  &:focus,
-  &.focus {
-    border-color: var(--color-btn-focus-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
-  }
+  //   &:focus,
+  //   &.focus {
+  //     border-color: var(--color-btn-focus-border);
+  //     outline: none;
+  //     box-shadow: var(--color-btn-focus-shadow);
+  //   }
 }
 
 // Primary button
@@ -127,14 +127,14 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     background-color: var(--color-btn-primary-selected-bg);
     box-shadow: var(--color-btn-primary-selected-shadow);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-primary-disabled-text);
     background-color: var(--color-btn-primary-disabled-bg);
     border-color: var(--color-btn-primary-disabled-border);
@@ -144,12 +144,12 @@
     }
   }
 
-  &:focus,
-  &.focus {
-    background-color: var(--color-btn-primary-focus-bg);
-    border-color: var(--color-btn-primary-focus-border);
-    box-shadow: var(--color-btn-primary-focus-shadow);
-  }
+  //   &:focus,
+  //   &.focus {
+  //     background-color: var(--color-btn-primary-focus-bg);
+  //     border-color: var(--color-btn-primary-focus-border);
+  //     box-shadow: var(--color-btn-primary-focus-shadow);
+  //   }
 
   .Counter {
     color: inherit;
@@ -184,7 +184,7 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     color: var(--color-btn-outline-selected-text);
     background-color: var(--color-btn-outline-selected-bg);
     border-color: var(--color-btn-outline-selected-border);
@@ -193,7 +193,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-outline-disabled-text);
     background-color: var(--color-btn-outline-disabled-bg);
     border-color: var(--color-btn-border);
@@ -204,10 +204,10 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-outline-focus-border);
-    box-shadow: var(--color-btn-outline-focus-shadow);
-  }
+  //   &:focus {
+  //     border-color: var(--color-btn-outline-focus-border);
+  //     box-shadow: var(--color-btn-outline-focus-shadow);
+  //   }
 
   .Counter {
     color: inherit;
@@ -242,7 +242,7 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     color: var(--color-btn-danger-selected-text);
     background-color: var(--color-btn-danger-selected-bg);
     border-color: var(--color-btn-danger-selected-border);
@@ -251,7 +251,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-danger-disabled-text);
     background-color: var(--color-btn-danger-disabled-bg);
     border-color: var(--color-btn-border);
@@ -266,10 +266,10 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-danger-focus-border);
-    box-shadow: var(--color-btn-danger-focus-shadow);
-  }
+  //   &:focus {
+  //     border-color: var(--color-btn-danger-focus-border);
+  //     box-shadow: var(--color-btn-danger-focus-shadow);
+  //   }
 
   .Counter {
     color: inherit;
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 936441f45a..38aa20bd30 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -21,7 +21,7 @@
   }
 
   &:disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     &,
     &:hover {
       color: var(--color-primer-fg-disabled);
@@ -51,7 +51,7 @@
   &:active,
   &:focus,
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
   &.zeroclipboard-is-active {
     color: var(--color-accent-fg);
     background: none;
@@ -62,7 +62,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     background-color: transparent;
   }
@@ -86,14 +86,18 @@
   border: 0;
   box-shadow: none;
 
-  &:hover { color: var(--color-accent-fg); }
+  &:hover {
+    color: var(--color-accent-fg);
+  }
 
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     cursor: default;
 
-    &:hover { color: var(--color-primer-fg-disabled); }
+    &:hover {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 }
 
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index b75156bbf5..78afa9cc71 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -10,7 +10,7 @@
     width: 8px;
     height: 16px;
     pointer-events: none;
-    content: " ";
+    content: ' ';
     clip-path: polygon(0 50%, 100% 0, 100% 100%);
   }
 
@@ -24,3 +24,10 @@
     background-color: $border;
   }
 }
+
+@mixin focusOutline {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: 2px;
+}

From b1ab3ca20a8d570a8e9cca270bb906242f9d476b Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 2 Nov 2021 13:25:13 -0700
Subject: [PATCH 02/45] add feature stories

---
 .../components/Button/Button.stories.jsx      | 109 ++++++++++++++++--
 .../Button/ButtonFeatures.stories.jsx         |  55 +++++++++
 2 files changed, 155 insertions(+), 9 deletions(-)
 create mode 100644 docs/src/stories/components/Button/ButtonFeatures.stories.jsx

diff --git a/docs/src/stories/components/Button/Button.stories.jsx b/docs/src/stories/components/Button/Button.stories.jsx
index 5b763f0254..798b597d51 100644
--- a/docs/src/stories/components/Button/Button.stories.jsx
+++ b/docs/src/stories/components/Button/Button.stories.jsx
@@ -7,31 +7,122 @@ export default {
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
-    }
+    },
+    layout: 'fullscreen'
   },
+
+  excludeStories: ['ButtonTemplate'],
   argTypes: {
     variant: {
-      options: [0, 1, 2, 3], // iterator
-      mapping: [null, 'btn-primary', 'btn-outline', 'btn-danger'], // values
+      options: [0, 1, 2, 3, 4, 5, 6, 7], // iterator
+      mapping: [
+        null,
+        'btn-primary',
+        'btn-outline',
+        'btn-danger',
+        'btn-link',
+        'btn-invisible',
+        'close-button',
+        'btn-with-count'
+      ], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'primary', 'outline', 'danger', 'link', 'invisible', 'close', 'with-count']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    size: {
+      options: [0, 1, 2], // iterator
+      mapping: [null, 'btn-sm', 'btn-large'], // values
       control: {
         type: 'select',
-        labels: ['default', 'primary', 'outline', 'danger']
+        labels: ['default', 'small', 'large']
       },
-      defaultValue: ''
+      table: {
+        category: 'CSS'
+      }
     },
     label: {
       defaultValue: 'Button',
       type: 'string',
       name: 'label',
-      description: 'string'
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    disabled: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    fullWidth: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    leadingVisual: {
+      name: 'leadingVisual',
+      type: 'string',
+      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      table: {
+        category: 'HTML'
+      }
+    },
+    trailingVisual: {
+      name: 'trailingVisual',
+      type: 'string',
+      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      table: {
+        category: 'HTML'
+      }
+    },
+    trailingAction: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    selected: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
     }
   }
 }
 
-const Template = ({label, variant}) => (
+export const ButtonTemplate = ({
+  label,
+  variant,
+  disabled,
+  size,
+  fullWidth,
+  leadingVisual,
+  trailingVisual,
+  trailingAction,
+  selected
+}) => (
   <>
-    <button className={clsx('btn', variant && `${variant}`)}>{label}</button>
+    <button
+      disabled={disabled}
+      className={clsx('btn', variant && `${variant}`, size && `${size}`, fullWidth && 'btn-block')}
+      aria-selected={selected}
+    >
+      {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />}
+      <span>{label}</span>
+      {trailingVisual && <span className="" dangerouslySetInnerHTML={{__html: trailingVisual}} />}
+      {trailingAction && <span class="dropdown-caret"></span>}
+    </button>
   </>
 )
 
-export const Button = Template.bind({})
+export const Playground = ButtonTemplate.bind({})
diff --git a/docs/src/stories/components/Button/ButtonFeatures.stories.jsx b/docs/src/stories/components/Button/ButtonFeatures.stories.jsx
new file mode 100644
index 0000000000..853ee49e81
--- /dev/null
+++ b/docs/src/stories/components/Button/ButtonFeatures.stories.jsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from './Button.stories'
+
+export default {
+  title: 'Components/Button/Features'
+}
+
+export const LeadingVisual = ButtonTemplate.bind({})
+LeadingVisual.storyName = 'Leading icon'
+LeadingVisual.args = {
+  label: 'Open in Desktop',
+  leadingVisual:
+    '<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
+}
+
+export const TrailingVisual = ButtonTemplate.bind({})
+TrailingVisual.storyName = 'Trailing icon'
+TrailingVisual.args = {
+  label: 'Open in Desktop',
+  trailingVisual:
+    '<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
+}
+
+export const Disabled = ButtonTemplate.bind({})
+Disabled.storyName = 'Disabled'
+Disabled.args = {
+  label: 'Disabled',
+  disabled: true
+}
+
+export const DisabledWithLeadingVisual = ButtonTemplate.bind({})
+DisabledWithLeadingVisual.storyName = 'Disabled with leading visual'
+DisabledWithLeadingVisual.args = {
+  label: 'Disabled',
+  disabled: true,
+  leadingVisual:
+    '<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
+}
+
+export const Selected = ButtonTemplate.bind({})
+Selected.storyName = 'Selected'
+Selected.args = {
+  label: 'Selected',
+  selected: true
+}
+
+export const SelectedWithLeadingVisual = ButtonTemplate.bind({})
+SelectedWithLeadingVisual.storyName = 'Selected with leading visual'
+SelectedWithLeadingVisual.args = {
+  label: 'Selected',
+  selected: true,
+  leadingVisual:
+    '<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
+}

From cf582b5e0ef0746f64dfd6cfd3f5ab8c1b0cdfbe Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 9 Nov 2021 14:21:25 -0800
Subject: [PATCH 03/45] add stories for focusable things, delete outline:0

---
 .../components/Button/Button.stories.jsx      |  36 ++++-
 .../components/Forms/Input.stories.jsx        | 141 ++++++++++++++++++
 .../components/Forms/Select.stories.jsx       |  83 +++++++++++
 .../components/Forms/Textarea.stories.jsx     | 117 +++++++++++++++
 .../stories/components/Link/Link.stories.jsx  |  61 ++++++++
 src/actionlist/action-list-item.scss          |  10 +-
 src/base/base.scss                            |   9 ++
 src/buttons/button.scss                       |   8 -
 src/buttons/misc.scss                         |  20 +--
 src/dropdown/dropdown.scss                    |   2 -
 src/forms/form-control.scss                   |   8 -
 src/navigation/menu.scss                      |  18 +--
 src/navigation/sidenav.scss                   |  15 +-
 src/toasts/toasts.scss                        |  10 +-
 14 files changed, 462 insertions(+), 76 deletions(-)
 create mode 100644 docs/src/stories/components/Forms/Input.stories.jsx
 create mode 100644 docs/src/stories/components/Forms/Select.stories.jsx
 create mode 100644 docs/src/stories/components/Forms/Textarea.stories.jsx
 create mode 100644 docs/src/stories/components/Link/Link.stories.jsx

diff --git a/docs/src/stories/components/Button/Button.stories.jsx b/docs/src/stories/components/Button/Button.stories.jsx
index 798b597d51..74cab4a2d0 100644
--- a/docs/src/stories/components/Button/Button.stories.jsx
+++ b/docs/src/stories/components/Button/Button.stories.jsx
@@ -8,7 +8,7 @@ export default {
       type: 'figma',
       url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
     },
-    layout: 'fullscreen'
+    layout: 'padded'
   },
 
   excludeStories: ['ButtonTemplate'],
@@ -22,12 +22,12 @@ export default {
         'btn-danger',
         'btn-link',
         'btn-invisible',
-        'close-button',
-        'btn-with-count'
+        'btn-with-count',
+        'btn-octicon'
       ], // values
       control: {
         type: 'select',
-        labels: ['default', 'primary', 'outline', 'danger', 'link', 'invisible', 'close', 'with-count']
+        labels: ['default', 'primary', 'outline', 'danger', 'link', 'invisible', 'close', 'with-count', 'icon-only']
       },
       table: {
         category: 'CSS'
@@ -67,6 +67,12 @@ export default {
         category: 'CSS'
       }
     },
+    closeBtn: {
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
     leadingVisual: {
       name: 'leadingVisual',
       type: 'string',
@@ -109,20 +115,38 @@ export const ButtonTemplate = ({
   leadingVisual,
   trailingVisual,
   trailingAction,
-  selected
+  selected,
+  closeBtn
 }) => (
   <>
     <button
       disabled={disabled}
-      className={clsx('btn', variant && `${variant}`, size && `${size}`, fullWidth && 'btn-block')}
+      className={clsx(
+        'btn',
+        variant && `${variant}`,
+        size && `${size}`,
+        fullWidth && 'btn-block',
+        closeBtn && 'close-button'
+      )}
       aria-selected={selected}
     >
       {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />}
       <span>{label}</span>
       {trailingVisual && <span className="" dangerouslySetInnerHTML={{__html: trailingVisual}} />}
       {trailingAction && <span class="dropdown-caret"></span>}
+      {closeBtn && (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+          <path
+            fill-rule="evenodd"
+            d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+          ></path>
+        </svg>
+      )}
     </button>
   </>
 )
 
 export const Playground = ButtonTemplate.bind({})
+Playground.args = {
+  closeBtn: false
+}
diff --git a/docs/src/stories/components/Forms/Input.stories.jsx b/docs/src/stories/components/Forms/Input.stories.jsx
new file mode 100644
index 0000000000..f7ef05453c
--- /dev/null
+++ b/docs/src/stories/components/Forms/Input.stories.jsx
@@ -0,0 +1,141 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Forms/Input',
+  parameters: {
+    layout: 'padded'
+  },
+  decorators: [
+    Story => (
+      <form>
+        <Story />
+      </form>
+    )
+  ],
+  excludeStories: ['InputTemplate'],
+  argTypes: {
+    size: {
+      options: [0, 1, 2], // iterator
+      mapping: [null, 'input-sm', 'input-lg'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'small', 'large']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    block: {
+      description: 'full width',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    monospace: {
+      description: 'monospace text',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    contrast: {
+      description: 'change input background to light gray',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    disabled: {
+      description: 'disabled field',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    hideWebKit: {
+      description: 'hide WebKit autofill icon',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    placeholder: {
+      type: 'string',
+      name: 'placeholder',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    label: {
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    type: {
+      name: 'type',
+      type: 'string',
+      description: 'type',
+      table: {
+        category: 'HTML'
+      }
+    },
+    id: {
+      name: 'id',
+      type: 'string',
+      description: 'id',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+export const InputTemplate = ({
+  label,
+  type,
+  id,
+  size,
+  block,
+  placeholder,
+  contrast,
+  disabled,
+  hideWebKit,
+  monospace
+}) => (
+  <>
+    <label for={id}>{label}</label>
+    <input
+      className={clsx(
+        'form-control',
+        size && `${size}`,
+        block && 'input-block',
+        contrast && 'input-contrast',
+        hideWebKit && 'input-hide-webkit-autofill',
+        monospace && 'input-monospace'
+      )}
+      type={type}
+      id={id}
+      placeholder={placeholder}
+      disabled={disabled}
+    />
+  </>
+)
+
+export const Playground = InputTemplate.bind({})
+Playground.args = {
+  type: 'email',
+  id: 'some-id',
+  placeholder: 'Email address',
+  label: 'Enter email address',
+  block: false,
+  hideWebKit: false,
+  monospace: false,
+  contrast: false,
+  disabled: false
+}
diff --git a/docs/src/stories/components/Forms/Select.stories.jsx b/docs/src/stories/components/Forms/Select.stories.jsx
new file mode 100644
index 0000000000..72b2ce6be4
--- /dev/null
+++ b/docs/src/stories/components/Forms/Select.stories.jsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Forms/Select',
+  parameters: {
+    layout: 'padded'
+  },
+  decorators: [
+    Story => (
+      <form>
+        <Story />
+      </form>
+    )
+  ],
+  excludeStories: ['SelectTemplate'],
+  argTypes: {
+    size: {
+      options: [0, 1], // iterator
+      mapping: [null, 'select-sm'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'small']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    disabled: {
+      description: 'disabled field',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    placeholder: {
+      type: 'string',
+      name: 'placeholder',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    label: {
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    id: {
+      name: 'id',
+      type: 'string',
+      description: 'id',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+export const SelectTemplate = ({label, id, size, placeholder, disabled}) => (
+  <>
+    <label for={id}>{label}</label>
+    <select className={clsx('form-select', size && `${size}`)} id={id} placeholder={placeholder} disabled={disabled}>
+      <option>Choose an option</option>
+      <option>Git</option>
+      <option>Subversion</option>
+      <option>Social Coding</option>
+      <option>Beets</option>
+      <option>Bears</option>
+      <option>Battlestar Galactica</option>
+    </select>
+  </>
+)
+
+export const Playground = SelectTemplate.bind({})
+Playground.args = {
+  id: 'some-id',
+  placeholder: 'Select',
+  label: 'Select one'
+}
diff --git a/docs/src/stories/components/Forms/Textarea.stories.jsx b/docs/src/stories/components/Forms/Textarea.stories.jsx
new file mode 100644
index 0000000000..f2769fe4b6
--- /dev/null
+++ b/docs/src/stories/components/Forms/Textarea.stories.jsx
@@ -0,0 +1,117 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Forms/Textarea',
+  parameters: {
+    layout: 'padded'
+  },
+  decorators: [
+    Story => (
+      <form>
+        <Story />
+      </form>
+    )
+  ],
+  excludeStories: ['TextareaTemplate'],
+  argTypes: {
+    size: {
+      options: [0, 1, 2], // iterator
+      mapping: [null, 'input-sm', 'input-lg'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'small', 'large']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    block: {
+      description: 'full width',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    contrast: {
+      description: 'change input background to light gray',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    disabled: {
+      description: 'disabled field',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    hideWebKit: {
+      description: 'hude WebKit autofill icon',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    placeholder: {
+      type: 'string',
+      name: 'placeholder',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    label: {
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    type: {
+      name: 'type',
+      type: 'string',
+      description: 'type',
+      table: {
+        category: 'HTML'
+      }
+    },
+    id: {
+      name: 'id',
+      type: 'string',
+      description: 'id',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+export const TextareaTemplate = ({label, type, id, size, block, placeholder, contrast, disabled, hideWebKit}) => (
+  <>
+    <label for={id}>{label}</label>
+    <textarea
+      className={clsx(
+        'form-control',
+        size && `${size}`,
+        block && 'input-block',
+        contrast && 'input-contrast',
+        hideWebKit && 'input-hide-webkit-autofill'
+      )}
+      type={type}
+      id={id}
+      placeholder={placeholder}
+      disabled={disabled}
+    />
+  </>
+)
+
+export const Playground = TextareaTemplate.bind({})
+Playground.args = {
+  type: 'email',
+  id: 'some-id',
+  placeholder: 'Email address',
+  label: 'Enter email address'
+}
diff --git a/docs/src/stories/components/Link/Link.stories.jsx b/docs/src/stories/components/Link/Link.stories.jsx
new file mode 100644
index 0000000000..8d862847af
--- /dev/null
+++ b/docs/src/stories/components/Link/Link.stories.jsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Link',
+  parameters: {
+    layout: 'padded'
+  },
+
+  excludeStories: ['LinkTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3, 4], // iterator
+      mapping: [null, 'Link--primary', 'Link--secondary', 'Link--muted', 'Link--onHover'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'primary', 'secondar', 'muted', 'onHover', 'invisible', 'close', 'with-count']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    noUnderline: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    label: {
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    href: {
+      name: 'href',
+      type: 'string',
+      description: 'url',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+export const LinkTemplate = ({label, variant, href, noUnderline}) => (
+  <>
+    <a href={href} className={clsx(variant && `${variant}`, noUnderline && 'no-underline')}>
+      {label}
+    </a>
+  </>
+)
+
+export const Playground = LinkTemplate.bind({})
+Playground.args = {
+  label: 'Link label',
+  href: '/'
+}
diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index bb4230281c..2d95512090 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -1,10 +1,3 @@
-@mixin focusOutline {
-  position: relative;
-  z-index: 1;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
-}
-
 // <li>
 .ActionList-item {
   position: relative;
@@ -171,8 +164,7 @@
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition:
- visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
diff --git a/src/base/base.scss b/src/base/base.scss
index 796d0f0c0c..1d223908c0 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -90,6 +90,7 @@ details {
 
 // global focus styles
 
+// add .focus
 // fallback :focus state
 :focus:is(a, button, input, textarea) {
   @include focusOutline;
@@ -104,3 +105,11 @@ details {
 :focus-visible:is(a, button, input, textarea) {
   @include focusOutline;
 }
+
+// remove outline offset for form fields
+:focus,
+:focus-visible {
+  &:is(input, textarea) {
+    outline-offset: 0;
+  }
+}
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index bfc32fe39f..10d69213c4 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -100,14 +100,6 @@
       color: var(--color-primer-fg-disabled);
     }
   }
-
-  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
-  //   &:focus,
-  //   &.focus {
-  //     border-color: var(--color-btn-focus-border);
-  //     outline: none;
-  //     box-shadow: var(--color-btn-focus-shadow);
-  //   }
 }
 
 // Primary button
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 38aa20bd30..a439c89c59 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -49,15 +49,12 @@
   }
 
   &:active,
-  &:focus,
   &.selected,
   &[aria-selected='true'],
   &.zeroclipboard-is-active {
     color: var(--color-accent-fg);
     background: none;
-    border-color: var(--color-btn-active-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
+    @include focusOutline;
   }
 
   &:disabled,
@@ -113,18 +110,13 @@
   color: var(--color-fg-muted);
   background: transparent;
   border: 0;
-  outline: none;
 
   &:hover {
     color: var(--color-fg-default);
   }
 
-  &:active,
-  &:focus {
-    color: var(--color-fg-muted);
-    border-color: var(--color-btn-active-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
+  &:active {
+    @include focusOutline;
   }
 }
 
@@ -217,10 +209,4 @@
     color: var(--color-accent-fg);
     cursor: pointer;
   }
-
-  &:focus {
-    z-index: 1;
-    outline: 0;
-    box-shadow: var(--color-primer-shadow-focus);
-  }
 }
diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss
index 4789eccd0c..bf959e154f 100644
--- a/src/dropdown/dropdown.scss
+++ b/src/dropdown/dropdown.scss
@@ -82,12 +82,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:focus,
   &:hover {
     color: var(--color-fg-on-emphasis);
     text-decoration: none;
     background-color: var(--color-accent-emphasis);
-    outline: none;
 
     > .octicon {
       color: inherit;
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index ffa5cd1aea..233b2a9a14 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -29,16 +29,8 @@ label {
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
   border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  outline: none;
   box-shadow: var(--color-primer-shadow-inset);
 
-  &.focus,
-  &:focus {
-    border-color: var(--color-accent-emphasis);
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
-  }
-
   &[disabled] {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-input-disabled-bg);
diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss
index 5159b494f6..0cfb57b622 100644
--- a/src/navigation/menu.scss
+++ b/src/navigation/menu.scss
@@ -22,7 +22,9 @@
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
 
-    &::before { border-top-left-radius: $border-radius; }
+    &::before {
+      border-top-left-radius: $border-radius;
+    }
   }
 
   &:last-child {
@@ -30,13 +32,9 @@
     border-bottom-right-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 
-    &::before { border-bottom-left-radius: $border-radius; }
-  }
-
-  &:focus {
-    z-index: 1;
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
+    &::before {
+      border-bottom-left-radius: $border-radius;
+    }
   }
 
   &:hover {
@@ -49,8 +47,8 @@
   }
 
   &.selected,
-  &[aria-selected=true],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
     cursor: default;
     background-color: var(--color-menu-bg-active);
 
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
index 275527973d..26d8d0a180 100644
--- a/src/navigation/sidenav.scss
+++ b/src/navigation/sidenav.scss
@@ -43,23 +43,16 @@
 
 // States
 
-.SideNav-item:focus {
-  z-index: 1;
-  outline: none;
-  box-shadow: var(--color-primer-shadow-focus);
-}
-
 .SideNav-item:hover {
   text-decoration: none;
   background-color: var(--color-neutral-subtle);
-  outline: none;
 }
 
 .SideNav-item:active {
   background-color: var(--color-canvas-subtle);
 }
 
-.SideNav-item[aria-current]:not([aria-current=false]),
+.SideNav-item[aria-current]:not([aria-current='false']),
 .SideNav-item[aria-selected='true'] {
   background-color: var(--color-sidenav-selected-bg);
 
@@ -94,14 +87,12 @@
   border: 0;
 }
 
-.SideNav-subItem:hover,
-.SideNav-subItem:focus {
+.SideNav-subItem:hover {
   color: var(--color-fg-default);
   text-decoration: none;
-  outline: none;
 }
 
-.SideNav-subItem[aria-current]:not([aria-current=false]),
+.SideNav-subItem[aria-current]:not([aria-current='false']),
 .SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
   color: var(--color-fg-default);
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss
index 3558a5b3ad..5720476ae9 100644
--- a/src/toasts/toasts.scss
+++ b/src/toasts/toasts.scss
@@ -40,9 +40,7 @@
   background-color: transparent;
   border: 0;
 
-  &:focus,
   &:hover {
-    outline: none;
     opacity: 0.7;
   }
 
@@ -119,6 +117,10 @@
 }
 
 @keyframes Toast--spinner {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

From 85f3431b0a78d0e7eb9ad82933b3854d1f8ec1cc Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 9 Nov 2021 15:06:16 -0800
Subject: [PATCH 04/45] switch back to box-shadow

---
 src/actionlist/action-list-item.scss | 10 ++++++----
 src/base/base.scss                   |  4 ++--
 src/buttons/button.scss              | 17 -----------------
 src/support/mixins/misc.scss         |  8 ++++++--
 4 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index 2d95512090..a27c6948b0 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -15,6 +15,12 @@
     }
   }
 
+  // li only: focus-visible, a href: focus-within on li
+  &:focus-visible,
+  &:focus-within {
+    @include focusOutline;
+  }
+
   // only hover li without list as children
   &:not(.ActionList-item--hasSubItem) {
     &:hover {
@@ -289,10 +295,6 @@
     margin-right: $spacer-2;
   }
 
-  &:focus-visible {
-    @include focusOutline;
-  }
-
   // sizes
 
   &.ActionList-content--sizeMedium {
diff --git a/src/base/base.scss b/src/base/base.scss
index 1d223908c0..34258062d2 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -106,10 +106,10 @@ details {
   @include focusOutline;
 }
 
-// remove outline offset for form fields
+// remove offset for form fields
 :focus,
 :focus-visible {
   &:is(input, textarea) {
-    outline-offset: 0;
+    box-shadow: 0 0 0 2px var(--color-accent-fg);
   }
 }
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 10d69213c4..b0d8223fd2 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -136,13 +136,6 @@
     }
   }
 
-  //   &:focus,
-  //   &.focus {
-  //     background-color: var(--color-btn-primary-focus-bg);
-  //     border-color: var(--color-btn-primary-focus-border);
-  //     box-shadow: var(--color-btn-primary-focus-shadow);
-  //   }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-primary-counter-bg);
@@ -196,11 +189,6 @@
     }
   }
 
-  //   &:focus {
-  //     border-color: var(--color-btn-outline-focus-border);
-  //     box-shadow: var(--color-btn-outline-focus-shadow);
-  //   }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-outline-counter-bg);
@@ -258,11 +246,6 @@
     }
   }
 
-  //   &:focus {
-  //     border-color: var(--color-btn-danger-focus-border);
-  //     box-shadow: var(--color-btn-danger-focus-shadow);
-  //   }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-danger-counter-bg);
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 78afa9cc71..5524dbd784 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -25,9 +25,13 @@
   }
 }
 
+// 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: 2px solid var(--color-accent-fg);
-  outline-offset: 2px;
+  outline: solid 1px transparent;
+  box-shadow: 0 0 0 2px var(--color-canvas-default), 0 0 0 4px var(--color-accent-fg);
 }

From b7e5c98232576e06547735c1703c19bbaed6055f Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 9 Nov 2021 15:17:41 -0800
Subject: [PATCH 05/45] support class

---
 src/base/base.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 34258062d2..2358c62f3e 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -90,10 +90,12 @@ details {
 
 // global focus styles
 
-// add .focus
 // fallback :focus state
-:focus:is(a, button, input, textarea) {
-  @include focusOutline;
+:focus,
+.focus {
+  &:is(a, button, input, textarea) {
+    @include focusOutline;
+  }
 }
 
 // remove fallback :focus if :focus-visible is supported

From 84aa9d633e58cc634089985a2b0883ddcb664640 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 9 Nov 2021 15:24:41 -0800
Subject: [PATCH 06/45] stylelint

---
 src/actionlist/action-list-item.scss | 3 ++-
 src/base/base.scss                   | 1 +
 src/toasts/toasts.scss               | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index a27c6948b0..2521d81891 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -170,7 +170,8 @@
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition:
+ visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
diff --git a/src/base/base.scss b/src/base/base.scss
index 2358c62f3e..51df1268bf 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -112,6 +112,7 @@ details {
 :focus,
 :focus-visible {
   &:is(input, textarea) {
+    // stylelint-disable-next-line primer/box-shadow
     box-shadow: 0 0 0 2px var(--color-accent-fg);
   }
 }
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss
index 5720476ae9..ed1cb21da9 100644
--- a/src/toasts/toasts.scss
+++ b/src/toasts/toasts.scss
@@ -120,6 +120,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

From 9b17a70ffed980c40ce3698b2d58e3e0e4f06332 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 9 Nov 2021 15:33:53 -0800
Subject: [PATCH 07/45] fix theme viewer

---
 docs/.storybook/preview-head.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html
index 16b173065b..fe487fd774 100644
--- a/docs/.storybook/preview-head.html
+++ b/docs/.storybook/preview-head.html
@@ -4,7 +4,7 @@
       Helvetica Neue, sans-serif;
     color: var(--color-fg-default);
     background-color: var(--color-canvas-default);
-    padding: 0;
+    height: 100vh;
   }
 
   .theme-wrap {
@@ -12,4 +12,18 @@
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     height: 100vh;
   }
+
+  .theme-wrap .story-wrap {
+    padding: 1rem;
+    height: unset;
+  }
+
+  .sb-main-padded .theme-wrap {
+    margin: -1rem;
+  }
+
+  .sb-main-padded div:not(.theme-wrap) > [data-dark-theme] {
+    margin: -1rem;
+    padding: 1rem;
+  }
 </style>

From ba93d3def6f88f6428ea37037fb9df347ea16cf2 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 10 Nov 2021 11:55:56 -0800
Subject: [PATCH 08/45] switch back to outline, address feedback

---
 src/base/base.scss           | 12 ++++++------
 src/buttons/misc.scss        |  2 +-
 src/forms/input-group.scss   |  7 +++++++
 src/support/mixins/misc.scss |  8 +++-----
 src/utilities/details.scss   | 18 +++++++++++++++---
 5 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 51df1268bf..3378ef5137 100644
--- a/src/base/base.scss
+++ b/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;
   }
 }
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index a439c89c59..733bf44dc2 100644
--- a/src/buttons/misc.scss
+++ b/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,
diff --git a/src/forms/input-group.scss b/src/forms/input-group.scss
index 7cae4ee406..c0bbeeb2ce 100644
--- a/src/forms/input-group.scss
+++ b/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,
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 5524dbd784..64a6c95c07 100644
--- a/src/support/mixins/misc.scss
+++ b/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;
 }
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index ad214f5654..4b0ad0275a 100644
--- a/src/utilities/details.scss
+++ b/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;
+  }
 }

From 55e0753c98c49c2c5323b8f3ec4cd3fcb32721c2 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 10 Nov 2021 12:00:42 -0800
Subject: [PATCH 09/45] lint

---
 src/base/base.scss         | 2 +-
 src/forms/input-group.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 3378ef5137..1a32fd1448 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -112,7 +112,7 @@ details {
 :focus,
 :focus-visible {
   &:is(input, textarea, select) {
-    outline-offset: 0;
     border-color: transparent;
+    outline-offset: 0;
   }
 }
diff --git a/src/forms/input-group.scss b/src/forms/input-group.scss
index c0bbeeb2ce..d8e5ebd089 100644
--- a/src/forms/input-group.scss
+++ b/src/forms/input-group.scss
@@ -21,6 +21,7 @@
 
   // within input group, if button exists change focus styles to match input (no offset)
   &:focus-within {
+    // stylelint-disable-next-line selector-max-type
     button {
       outline-offset: 0;
     }

From 6cca16ff54c04092739825fd8cfcdc78fa9dc636 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 11 Nov 2021 10:40:13 -0800
Subject: [PATCH 10/45] temp stashing stories here

---
 .../components/Button/Button.stories.jsx      | 50 ++++++++++++++-----
 .../Button/ButtonFeatures.stories.jsx         |  8 +++
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/docs/src/stories/components/Button/Button.stories.jsx b/docs/src/stories/components/Button/Button.stories.jsx
index 74cab4a2d0..d766308e46 100644
--- a/docs/src/stories/components/Button/Button.stories.jsx
+++ b/docs/src/stories/components/Button/Button.stories.jsx
@@ -73,6 +73,12 @@ export default {
         category: 'CSS'
       }
     },
+    dropdownBtn: {
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
     leadingVisual: {
       name: 'leadingVisual',
       type: 'string',
@@ -81,19 +87,28 @@ export default {
         category: 'HTML'
       }
     },
-    trailingVisual: {
-      name: 'trailingVisual',
+    icon: {
+      name: 'icon',
       type: 'string',
       description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
       table: {
         category: 'HTML'
       }
     },
-    trailingAction: {
-      defaultValue: false,
-      control: {type: 'boolean'},
+    id: {
+      name: 'id',
+      type: 'string',
+      description: 'label id for icon only buttons',
       table: {
-        category: 'CSS'
+        category: 'HTML'
+      }
+    },
+    trailingVisual: {
+      name: 'trailingVisual',
+      type: 'string',
+      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      table: {
+        category: 'HTML'
       }
     },
     selected: {
@@ -114,9 +129,11 @@ export const ButtonTemplate = ({
   fullWidth,
   leadingVisual,
   trailingVisual,
-  trailingAction,
   selected,
-  closeBtn
+  closeBtn,
+  dropdownBtn,
+  icon,
+  id
 }) => (
   <>
     <button
@@ -128,12 +145,21 @@ export const ButtonTemplate = ({
         fullWidth && 'btn-block',
         closeBtn && 'close-button'
       )}
-      aria-selected={selected}
+      aria-selected={selected && selected}
+      aria-labelledby={id}
     >
       {leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />}
-      <span>{label}</span>
-      {trailingVisual && <span className="" dangerouslySetInnerHTML={{__html: trailingVisual}} />}
-      {trailingAction && <span class="dropdown-caret"></span>}
+      <span hidden={icon} id={id}>
+        {label}
+      </span>
+      {icon && <span className="" dangerouslySetInnerHTML={{__html: icon}} />}
+      {trailingVisual && (
+        <>
+          <span className="" dangerouslySetInnerHTML={{__html: trailingVisual}} />{' '}
+          {dropdownBtn && <span class="dropdown-caret"></span>}
+        </>
+      )}
+
       {closeBtn && (
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
           <path
diff --git a/docs/src/stories/components/Button/ButtonFeatures.stories.jsx b/docs/src/stories/components/Button/ButtonFeatures.stories.jsx
index 853ee49e81..e75092c23d 100644
--- a/docs/src/stories/components/Button/ButtonFeatures.stories.jsx
+++ b/docs/src/stories/components/Button/ButtonFeatures.stories.jsx
@@ -53,3 +53,11 @@ SelectedWithLeadingVisual.args = {
   leadingVisual:
     '<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
 }
+
+export const IconOnly = ButtonTemplate.bind({})
+IconOnly.storyName = 'Icon only'
+IconOnly.args = {
+  label: 'Description of action',
+  id: 'my-button-label',
+  icon: '<svg class="octicon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
+}

From d0425dcddb801260aaae7dbcc75acaeecdfbeb6a Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 16 Nov 2021 13:41:25 -0800
Subject: [PATCH 11/45] Create giant-bees-talk.md

---
 .changeset/giant-bees-talk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/giant-bees-talk.md

diff --git a/.changeset/giant-bees-talk.md b/.changeset/giant-bees-talk.md
new file mode 100644
index 0000000000..0cf8b5b187
--- /dev/null
+++ b/.changeset/giant-bees-talk.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Creating global focus styles

From e38caea23419c7343397d7516e462dea73ae9ed8 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 17 Nov 2021 14:48:53 -0800
Subject: [PATCH 12/45] I think we got it!

---
 src/base/base.scss | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 1a32fd1448..68ea6ba0c0 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -90,27 +90,42 @@ details {
 
 // global focus styles
 
-// fallback :focus state
-:focus,
-.focus {
-  &:is(a, button, input, textarea, select) {
+a,
+button,
+input,
+textarea,
+select {
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
     @include focusOutline;
   }
 }
 
-// remove fallback :focus if :focus-visible is supported
-:focus:is(a, button, input, textarea, select):not(:focus-visible) {
-  outline: solid 1px transparent;
+input,
+textarea,
+select {
+  &:focus,
+  :focus-visible {
+    // transparent border to not conflict with focus outline
+    border-color: transparent;
+    outline-offset: 0;
+  }
 }
 
-// default :focus-visibile state
-:focus-visible:is(a, button, input, textarea, select) {
+// for handling focus conditionally
+.focus {
   @include focusOutline;
-}
 
-// remove offset for form fields
-:focus,
-:focus-visible {
   &:is(input, textarea, select) {
     border-color: transparent;
     outline-offset: 0;

From 2fade4ef8ebc5480ca02512268793122863faf1e Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 17 Nov 2021 15:17:32 -0800
Subject: [PATCH 13/45] address input directly

---
 .../components/Forms/FormGroup.stories.jsx    | 165 ++++++++++++++++++
 src/base/base.scss                            |   5 +-
 src/forms/form-group.scss                     |  60 +++++--
 3 files changed, 210 insertions(+), 20 deletions(-)
 create mode 100644 docs/src/stories/components/Forms/FormGroup.stories.jsx

diff --git a/docs/src/stories/components/Forms/FormGroup.stories.jsx b/docs/src/stories/components/Forms/FormGroup.stories.jsx
new file mode 100644
index 0000000000..84b6d764ac
--- /dev/null
+++ b/docs/src/stories/components/Forms/FormGroup.stories.jsx
@@ -0,0 +1,165 @@
+import React from 'react'
+import clsx from 'clsx'
+import {InputTemplate} from './Input.stories'
+
+export default {
+  title: 'Components/Forms/FormGroup',
+  parameters: {
+    layout: 'padded'
+  },
+  decorators: [
+    Story => (
+      <form>
+        <Story />
+      </form>
+    )
+  ],
+  excludeStories: ['FormGroupTemplate'],
+  argTypes: {
+    size: {
+      options: [0, 1, 2], // iterator
+      mapping: [null, 'input-sm', 'input-lg'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'small', 'large']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    block: {
+      description: 'full width',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    monospace: {
+      description: 'monospace text',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    contrast: {
+      description: 'change input background to light gray',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    disabled: {
+      description: 'disabled field',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    hideWebKit: {
+      description: 'hide WebKit autofill icon',
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    placeholder: {
+      type: 'string',
+      name: 'placeholder',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    label: {
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    type: {
+      name: 'type',
+      type: 'string',
+      description: 'type',
+      table: {
+        category: 'HTML'
+      }
+    },
+    id: {
+      name: 'id',
+      type: 'string',
+      description: 'id',
+      table: {
+        category: 'HTML'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on element',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    focusAllElements: {
+      control: {type: 'boolean'},
+      description: 'set focus on all elements for viewing in all themes',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var input = document.getElementsByTagName('input')[0]
+  // set focus on element
+  input.focus()
+}
+
+export const FormGroupTemplate = ({
+  label,
+  type,
+  id,
+  size,
+  block,
+  placeholder,
+  contrast,
+  disabled,
+  hideWebKit,
+  monospace,
+  focusElement,
+  focusAllElements
+}) => (
+  <>
+    <form class="pb-6">
+      <div class="form-group errored">
+        <div class="form-group-header">
+          <label for="username-input">Username</label>
+        </div>
+        <div class="form-group-body">
+          <InputTemplate {...InputTemplate.args} />
+        </div>
+        <p class="note error" id="username-input-validation">
+          monalisa is not available. monalisa-beep, monalisa-cyber, or monalisa87 are available.
+        </p>
+      </div>
+    </form>
+  </>
+)
+
+export const Playground = FormGroupTemplate.bind({})
+Playground.args = {
+  type: 'email',
+  id: 'some-id',
+  placeholder: 'Email address',
+  label: 'Enter email address',
+  block: false,
+  hideWebKit: false,
+  monospace: false,
+  contrast: false,
+  disabled: false,
+  focusElement: false,
+  focusAllElements: false
+}
diff --git a/src/base/base.scss b/src/base/base.scss
index 68ea6ba0c0..33a0ea2d0a 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -115,9 +115,7 @@ input,
 textarea,
 select {
   &:focus,
-  :focus-visible {
-    // transparent border to not conflict with focus outline
-    border-color: transparent;
+  &:focus-visible {
     outline-offset: 0;
   }
 }
@@ -127,7 +125,6 @@ select {
   @include focusOutline;
 
   &:is(input, textarea, select) {
-    border-color: transparent;
     outline-offset: 0;
   }
 }
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index 2a50f84624..d47aaa5c0e 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -26,11 +26,17 @@
       background-color: var(--color-canvas-default);
     }
 
-    &.shorter { width: 130px; }
+    &.shorter {
+      width: 130px;
+    }
 
-    &.short { width: 250px; }
+    &.short {
+      width: 250px;
+    }
 
-    &.long { width: 100%; }
+    &.long {
+      width: 100%;
+    }
   }
 
   // Textarea
@@ -81,9 +87,13 @@
     h4 {
       margin: $spacer-1 0 0;
 
-      &.is-error { color: var(--color-danger-fg); }
+      &.is-error {
+        color: var(--color-danger-fg);
+      }
 
-      &.is-success { color: var(--color-success-fg); }
+      &.is-success {
+        color: var(--color-success-fg);
+      }
 
       + .note {
         margin-top: 0;
@@ -191,33 +201,45 @@
   &.successed {
     .success {
       color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-color: var(
+        --color-canvas-default
+      ); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
       border-color: var(--color-success-muted);
 
-      &::after { border-bottom-color: var(--color-success-subtle); }
-      &::before { border-bottom-color: var(--color-success-muted); }
+      &::after {
+        border-bottom-color: var(--color-success-subtle);
+      }
+      &::before {
+        border-bottom-color: var(--color-success-muted);
+      }
     }
   }
 
   &.warn {
-    .form-control {
+    .form-control:not(:focus, :focus-visible) {
       border-color: var(--color-attention-emphasis);
     }
 
     .warning {
       color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-color: var(
+        --color-canvas-default
+      ); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
       border-color: var(--color-attention-muted);
 
-      &::after { border-bottom-color: var(--color-attention-subtle); }
-      &::before { border-bottom-color: var(--color-attention-muted); }
+      &::after {
+        border-bottom-color: var(--color-attention-subtle);
+      }
+      &::before {
+        border-bottom-color: var(--color-attention-muted);
+      }
     }
   }
 
   &.errored {
-    .form-control {
+    .form-control:not(:focus, :focus-visible) {
       border-color: var(--color-danger-emphasis);
     }
 
@@ -227,12 +249,18 @@
 
     .error {
       color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-color: var(
+        --color-canvas-default
+      ); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
       border-color: var(--color-danger-muted);
 
-      &::after { border-bottom-color: var(--color-danger-subtle); }
-      &::before { border-bottom-color: var(--color-danger-muted); }
+      &::after {
+        border-bottom-color: var(--color-danger-subtle);
+      }
+      &::before {
+        border-bottom-color: var(--color-danger-muted);
+      }
     }
   }
 }

From d2e21e7a3dca08301dd8806e166e3f58b1082295 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 17 Nov 2021 15:31:34 -0800
Subject: [PATCH 14/45] checkbox/radio outline offset

---
 docs/src/stories/components/Forms/Checkbox.stories.jsx | 3 ++-
 src/base/base.scss                                     | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/src/stories/components/Forms/Checkbox.stories.jsx b/docs/src/stories/components/Forms/Checkbox.stories.jsx
index f4a28347b9..0dac6fdc95 100644
--- a/docs/src/stories/components/Forms/Checkbox.stories.jsx
+++ b/docs/src/stories/components/Forms/Checkbox.stories.jsx
@@ -117,5 +117,6 @@ Playground.args = {
   highlight: false,
   note: '',
   type: 'checkbox',
-  focusAllElements: false
+  focusAllElements: false,
+  type: 'checkbox'
 }
diff --git a/src/base/base.scss b/src/base/base.scss
index 33a0ea2d0a..3ab183e519 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -111,7 +111,7 @@ select {
   }
 }
 
-input,
+input:not([type='radio'], [type='checkbox']),
 textarea,
 select {
   &:focus,

From b84e0b084abbc28013b5f956ee356dc93d1b871b Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 17 Nov 2021 15:33:57 -0800
Subject: [PATCH 15/45] lint

---
 src/forms/form-group.scss | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index d47aaa5c0e..10f80bbb42 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -201,15 +201,14 @@
   &.successed {
     .success {
       color: var(--color-fg-default);
-      background-color: var(
-        --color-canvas-default
-      ); // Makes sure the background is opaque to cover any content underneath
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
       border-color: var(--color-success-muted);
 
       &::after {
         border-bottom-color: var(--color-success-subtle);
       }
+
       &::before {
         border-bottom-color: var(--color-success-muted);
       }
@@ -223,15 +222,14 @@
 
     .warning {
       color: var(--color-fg-default);
-      background-color: var(
-        --color-canvas-default
-      ); // Makes sure the background is opaque to cover any content underneath
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
       border-color: var(--color-attention-muted);
 
       &::after {
         border-bottom-color: var(--color-attention-subtle);
       }
+
       &::before {
         border-bottom-color: var(--color-attention-muted);
       }
@@ -249,15 +247,14 @@
 
     .error {
       color: var(--color-fg-default);
-      background-color: var(
-        --color-canvas-default
-      ); // Makes sure the background is opaque to cover any content underneath
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
       border-color: var(--color-danger-muted);
 
       &::after {
         border-bottom-color: var(--color-danger-subtle);
       }
+
       &::before {
         border-bottom-color: var(--color-danger-muted);
       }

From 534127364c57562601614ce59bdbce13e2bfaf25 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 17 Nov 2021 15:58:39 -0800
Subject: [PATCH 16/45] change actionlist to just use focus

---
 src/actionlist/action-list-item.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index 2521d81891..a03700ec76 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -15,8 +15,8 @@
     }
   }
 
-  // li only: focus-visible, a href: focus-within on li
-  &:focus-visible,
+  // li only: focus, a href: focus-within on li
+  &:focus,
   &:focus-within {
     @include focusOutline;
   }

From 168a9f8086ba33b86d1c6b095406073c37c2740f Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 14 Dec 2021 12:28:25 -0800
Subject: [PATCH 17/45] merge

---
 src/actionlist/action-list-item.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index dccf284110..766355bd5c 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -1,10 +1,3 @@
-@mixin focusOutline {
-  position: relative;
-  z-index: 1;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
-}
-
 @mixin activeIndicatorLine {
   position: absolute;
   top: calc(50% - 12px);

From 0eb5ffd9f58a4a43951f384dcb2b10f23aa0b643 Mon Sep 17 00:00:00 2001
From: Katie Langerman <langermank@github.com>
Date: Tue, 14 Dec 2021 12:37:01 -0800
Subject: [PATCH 18/45] Update giant-bees-talk.md

---
 .changeset/giant-bees-talk.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/giant-bees-talk.md b/.changeset/giant-bees-talk.md
index 0cf8b5b187..664a3faccd 100644
--- a/.changeset/giant-bees-talk.md
+++ b/.changeset/giant-bees-talk.md
@@ -1,5 +1,5 @@
 ---
-"@primer/css": minor
+"@primer/css": major
 ---
 
-Creating global focus styles
+Global CSS focus styles

From d5700602fc96d9ac79cb3d6c0333d06e797d3edb Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 14 Dec 2021 13:18:02 -0800
Subject: [PATCH 19/45] address marketing styles

---
 .../stories/components/Link/Link.stories.jsx  |   2 +-
 .../Marketing/MarketingButton.stories.jsx     | 121 ++++++++++++++++++
 .../Marketing/MarketingLink.stories.jsx       | 109 ++++++++++++++++
 src/marketing/buttons/button.scss             |  33 +----
 src/marketing/links/link.scss                 |   5 +-
 5 files changed, 235 insertions(+), 35 deletions(-)
 create mode 100644 docs/src/stories/components/Marketing/MarketingButton.stories.jsx
 create mode 100644 docs/src/stories/components/Marketing/MarketingLink.stories.jsx

diff --git a/docs/src/stories/components/Link/Link.stories.jsx b/docs/src/stories/components/Link/Link.stories.jsx
index b8dc10f432..b153ae71dd 100644
--- a/docs/src/stories/components/Link/Link.stories.jsx
+++ b/docs/src/stories/components/Link/Link.stories.jsx
@@ -14,7 +14,7 @@ export default {
       mapping: [null, 'Link--primary', 'Link--secondary', 'Link--muted', 'Link--onHover'], // values
       control: {
         type: 'select',
-        labels: ['default', 'primary', 'secondar', 'muted', 'onHover', 'invisible', 'close', 'with-count']
+        labels: ['default', 'primary', 'secondary', 'muted', 'onHover', 'invisible', 'close', 'with-count']
       },
       table: {
         category: 'CSS'
diff --git a/docs/src/stories/components/Marketing/MarketingButton.stories.jsx b/docs/src/stories/components/Marketing/MarketingButton.stories.jsx
new file mode 100644
index 0000000000..69ef74016b
--- /dev/null
+++ b/docs/src/stories/components/Marketing/MarketingButton.stories.jsx
@@ -0,0 +1,121 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Marketing/Button',
+  parameters: {
+    layout: 'padded'
+  },
+
+  excludeStories: ['ButtonTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3], // iterator
+      mapping: [null, 'btn-muted-mktg', 'btn-subtle-mktg', 'btn-signup-mktg'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'muted', 'subtle', 'signup']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    size: {
+      options: [0, 1, 2], // iterator
+      mapping: [null, 'btn-small-mktg', 'btn-large-mktg'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['default', 'small', 'large']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    label: {
+      defaultValue: 'Button',
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    disabled: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'Interactive'
+      }
+    },
+    animated: {
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on one element',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    focusAllElements: {
+      control: {type: 'boolean'},
+      description: 'set focus on all elements for viewing in all themes',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var button = document.getElementsByTagName('button')[0]
+  // set focus on element
+  button.focus()
+}
+
+export const ButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
+  <>
+    <button
+      disabled={disabled}
+      className={clsx(
+        'btn-mktg',
+        variant && `${variant}`,
+        size && `${size}`,
+        animated && 'arrow-target-mktg',
+        focusAllElements && 'focus'
+      )}
+    >
+      {label}
+      {animated && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="octicon arrow-symbol-mktg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path
+            fill="currentColor"
+            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"
+          ></path>
+          <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+        </svg>
+      )}
+    </button>
+    {focusElement && focusMethod()}
+  </>
+)
+
+export const Playground = ButtonTemplate.bind({})
+Playground.args = {
+  animated: false,
+  focusElement: false,
+  focusAllElements: false,
+  variant: 0,
+  size: 0
+}
diff --git a/docs/src/stories/components/Marketing/MarketingLink.stories.jsx b/docs/src/stories/components/Marketing/MarketingLink.stories.jsx
new file mode 100644
index 0000000000..028b067f09
--- /dev/null
+++ b/docs/src/stories/components/Marketing/MarketingLink.stories.jsx
@@ -0,0 +1,109 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Marketing/Link',
+  parameters: {
+    layout: 'padded'
+  },
+
+  excludeStories: ['LinkTemplate'],
+  argTypes: {
+    size: {
+      options: [0, 1], // iterator
+      mapping: ['f4-mktg', 'f3-mktg'], // values
+      control: {
+        type: 'inline-radio',
+        labels: ['small', 'large']
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    emphasis: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      table: {
+        category: 'CSS'
+      }
+    },
+    label: {
+      type: 'string',
+      name: 'label',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    href: {
+      name: 'href',
+      type: 'string',
+      description: 'url',
+      table: {
+        category: 'HTML'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on element',
+      table: {
+        category: 'Interactive'
+      }
+    },
+    focusAllElements: {
+      control: {type: 'boolean'},
+      description: 'set focus on all elements for viewing in all themes',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var link = document.getElementsByTagName('a')[0]
+  // set focus on element
+  link.focus()
+}
+
+export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
+  <>
+    <a
+      href={href}
+      className={clsx(
+        'link-mktg arrow-target-mktg text-semibold',
+        size && `${size}`,
+        focusAllElements && 'focus',
+        emphasis && 'link-emphasis-mktg'
+      )}
+    >
+      {label}{' '}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="octicon arrow-symbol-mktg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+      >
+        <path
+          fill="currentColor"
+          d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"
+        ></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+      </svg>
+    </a>
+    {focusElement && focusMethod()}
+  </>
+)
+
+export const Playground = LinkTemplate.bind({})
+Playground.args = {
+  label: 'Link label',
+  href: '/',
+  focusElement: false,
+  focusAllElements: false,
+  size: 3,
+  emphasis: false
+}
diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 8638eee851..314d1840d4 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -13,7 +13,8 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), var(--color-mktg-btn-bg) !important;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+    var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 0.375rem;
@@ -42,29 +43,16 @@
     box-shadow: var(--color-mktg-btn-shadow-hover) !important;
   }
 
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
-  }
-
   &:hover,
   &:focus,
+  &:focus-visible,
   &.focus {
     &::before {
       opacity: 1;
     }
-
-    &:disabled {
-      box-shadow: none !important;
-    }
   }
 
   &:active {
-    outline: none;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 transparent;
-
     &::before {
       opacity: 0.5 !important;
     }
@@ -91,11 +79,6 @@
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
 
-  &:focus,
-  &.focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
-
   &:active {
     // stylelint-disable-next-line primer/box-shadow
     box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
@@ -119,11 +102,6 @@
   &:hover {
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
-
-  &:focus,
-  .focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
 }
 
 .btn-signup-mktg {
@@ -136,11 +114,6 @@
     // stylelint-disable-next-line primer/colors
     background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
   }
-
-  &:focus {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
-  }
 }
 
 // Size modifiers
diff --git a/src/marketing/links/link.scss b/src/marketing/links/link.scss
index 13dd30aadc..8f8171e516 100644
--- a/src/marketing/links/link.scss
+++ b/src/marketing/links/link.scss
@@ -6,10 +6,6 @@
     text-decoration: none;
   }
 
-  &:active {
-    outline: none;
-  }
-
   &::after,
   &.link-emphasis-mktg::before {
     position: absolute;
@@ -36,6 +32,7 @@
 
   &:hover,
   &:focus,
+  &:focus-visible,
   &:active {
     &::after {
       transform: scaleX(1);

From eb3a61c5f3ac13c48869e4131f90a6b7d75fbb39 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 22 Dec 2021 09:14:06 -0800
Subject: [PATCH 20/45] tabnav focus fix

---
 .../components/Navigation/TabNav.stories.jsx  |  51 +++++++++
 .../Navigation/TabNavItem.stories.jsx         | 104 ++++++++++++++++++
 src/navigation/tabnav.scss                    |   8 +-
 3 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/stories/components/Navigation/TabNav.stories.jsx
 create mode 100644 docs/src/stories/components/Navigation/TabNavItem.stories.jsx

diff --git a/docs/src/stories/components/Navigation/TabNav.stories.jsx b/docs/src/stories/components/Navigation/TabNav.stories.jsx
new file mode 100644
index 0000000000..42e25e7525
--- /dev/null
+++ b/docs/src/stories/components/Navigation/TabNav.stories.jsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import clsx from 'clsx'
+import {TabNavItemTemplate} from './TabNavItem.stories' // import stories for component compositions
+
+export default {
+  title: 'Components/Navigation/TabNav',
+  excludeStories: ['TabNavTemplate'],
+  layout: 'padded',
+  argTypes: {
+    children: {
+      description: 'slot for tab items',
+      table: {
+        category: 'HTML'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on element',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var link = document.getElementsByTagName('a')[0]
+  // set focus on element
+  link.focus()
+}
+
+export const TabNavTemplate = ({children, focusElement}) => (
+  <div class="tabnav">
+    <nav class="tabnav-tabs" aria-label="Foo bar">
+      {children}
+    </nav>
+    {focusElement && focusMethod()}
+  </div>
+)
+
+export const Playground = TabNavTemplate.bind({})
+Playground.args = {
+  focusElement: false,
+  children: (
+    <>
+      <TabNavItemTemplate text="First tab" ariaCurrent="location" href="#url" />
+      <TabNavItemTemplate text="Second tab" />
+    </>
+  )
+}
diff --git a/docs/src/stories/components/Navigation/TabNavItem.stories.jsx b/docs/src/stories/components/Navigation/TabNavItem.stories.jsx
new file mode 100644
index 0000000000..38d710440e
--- /dev/null
+++ b/docs/src/stories/components/Navigation/TabNavItem.stories.jsx
@@ -0,0 +1,104 @@
+import React from 'react'
+import clsx from 'clsx'
+// import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions
+
+export default {
+  title: 'Components/Navigation/TabNavItem',
+  excludeStories: ['TabNavItemTemplate'],
+  layout: 'padded',
+  argTypes: {
+    leadingVisual: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      description: 'Show octicon',
+      table: {
+        category: 'HTML'
+      }
+    },
+    trailingVisual: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      description: 'Show counter',
+      table: {
+        category: 'HTML'
+      }
+    },
+    text: {
+      defaultValue: 'Item label',
+      type: 'string',
+      name: 'text',
+      description: 'string',
+      table: {
+        category: 'HTML'
+      }
+    },
+    href: {
+      defaultValue: '',
+      type: 'string',
+      name: 'href',
+      description: 'Item link (href)',
+      table: {
+        category: 'HTML'
+      }
+    },
+    ariaCurrent: {
+      options: ['location', 'page'],
+      control: {type: 'inline-radio'},
+      description: 'location for anchor links, page for global page navigation',
+      table: {
+        category: 'HTML'
+      }
+    },
+    focusElement: {
+      control: {type: 'boolean'},
+      description: 'set focus on element',
+      table: {
+        category: 'Interactive'
+      }
+    }
+  }
+}
+
+const focusMethod = function getFocus() {
+  // find the focusable element
+  var link = document.getElementsByTagName('a')[0]
+  // set focus on element
+  link.focus()
+}
+
+// build every component case here in the template (private api)
+export const TabNavItemTemplate = ({leadingVisual, trailingVisual, text, href, ariaCurrent, focusElement}) => (
+  <>
+    <a class="tabnav-tab" href={href} aria-current={ariaCurrent}>
+      {leadingVisual && (
+        <svg
+          class="octicon octicon-comment-discussion"
+          viewBox="0 0 16 16"
+          version="1.1"
+          width="16"
+          height="16"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M1.5 2.75C1.5 2.6837 1.52634 2.62011 1.57322 2.57322C1.62011 2.52634 1.6837 2.5 1.75 2.5H10.25C10.3163 2.5 10.3799 2.52634 10.4268 2.57322C10.4737 2.62011 10.5 2.6837 10.5 2.75V8.25C10.5 8.3163 10.4737 8.37989 10.4268 8.42678C10.3799 8.47366 10.3163 8.5 10.25 8.5H6.75C6.55115 8.50017 6.36052 8.57931 6.22 8.72L3.5 11.44V9.25C3.5 9.05109 3.42098 8.86032 3.28033 8.71967C3.13968 8.57902 2.94891 8.5 2.75 8.5H1.75C1.6837 8.5 1.62011 8.47366 1.57322 8.42678C1.52634 8.37989 1.5 8.3163 1.5 8.25V2.75ZM1.75 1C1.28587 1 0.840752 1.18437 0.512563 1.51256C0.184374 1.84075 0 2.28587 0 2.75L0 8.25C0 9.216 0.784 10 1.75 10H2V11.543C2.0001 11.8311 2.08561 12.1127 2.24571 12.3522C2.40581 12.5917 2.63333 12.7784 2.8995 12.8886C3.16567 12.9988 3.45854 13.0277 3.74111 12.9715C4.02367 12.9153 4.28324 12.7767 4.487 12.573L7.061 10H10.25C10.7141 10 11.1592 9.81563 11.4874 9.48744C11.8156 9.15925 12 8.71413 12 8.25V2.75C12 2.28587 11.8156 1.84075 11.4874 1.51256C11.1592 1.18437 10.7141 1 10.25 1H1.75ZM14.5 4.75C14.5 4.6837 14.4737 4.62011 14.4268 4.57322C14.3799 4.52634 14.3163 4.5 14.25 4.5H13.75C13.5511 4.5 13.3603 4.42098 13.2197 4.28033C13.079 4.13968 13 3.94891 13 3.75C13 3.55109 13.079 3.36032 13.2197 3.21967C13.3603 3.07902 13.5511 3 13.75 3H14.25C15.216 3 16 3.784 16 4.75V10.25C16 10.7141 15.8156 11.1592 15.4874 11.4874C15.1592 11.8156 14.7141 12 14.25 12H14V13.543C13.9999 13.8311 13.9144 14.1127 13.7543 14.3522C13.5942 14.5917 13.3667 14.7784 13.1005 14.8886C12.8343 14.9988 12.5415 15.0277 12.2589 14.9715C11.9763 14.9153 11.7168 14.7767 11.513 14.573L9.22 12.28C9.14631 12.2113 9.08721 12.1285 9.04622 12.0365C9.00523 11.9445 8.98318 11.8452 8.98141 11.7445C8.97963 11.6438 8.99816 11.5438 9.03588 11.4504C9.0736 11.357 9.12974 11.2722 9.20096 11.201C9.27218 11.1297 9.35701 11.0736 9.4504 11.0359C9.54379 10.9982 9.64382 10.9796 9.74452 10.9814C9.84523 10.9832 9.94454 11.0052 10.0365 11.0462C10.1285 11.0872 10.2113 11.1463 10.28 11.22L12.5 13.44V11.25C12.5 11.0511 12.579 10.8603 12.7197 10.7197C12.8603 10.579 13.0511 10.5 13.25 10.5H14.25C14.3163 10.5 14.3799 10.4737 14.4268 10.4268C14.4737 10.3799 14.5 10.3163 14.5 10.25V4.75Z"
+          ></path>
+        </svg>
+      )}
+      {text}
+      {trailingVisual && <span class="Counter">2</span>}
+    </a>
+    {focusElement && focusMethod()}
+  </>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = TabNavItemTemplate.bind({})
+Playground.args = {
+  text: 'Foo tab',
+  href: '#url',
+  leadingVisual: false,
+  trailingVisual: false,
+  focusElement: false
+}
diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss
index 5d52cc5693..b3e9518deb 100644
--- a/src/navigation/tabnav.scss
+++ b/src/navigation/tabnav.scss
@@ -40,13 +40,17 @@
     }
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: var(--color-fg-default);
     text-decoration: none;
     transition-duration: 0.1s;
   }
 
+  &:focus,
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+
   &:active {
     color: var(--color-fg-muted);
   }

From 771d0dd6f5db5071c3c2d83f3721754861e046ae Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 22 Dec 2021 09:29:13 -0800
Subject: [PATCH 21/45] reach all buttons

---
 src/base/base.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/base/base.scss b/src/base/base.scss
index 2f30cc5b32..bb6c117317 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -93,6 +93,7 @@ details {
 
 a,
 button,
+[role='button'],
 input,
 textarea,
 select {

From 6770984be990d44e13da654b7e6706ed1439981e Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 22 Dec 2021 09:46:11 -0800
Subject: [PATCH 22/45] attempt windows hc selector

---
 src/base/base.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/base/base.scss b/src/base/base.scss
index bb6c117317..7bec499250 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -130,3 +130,10 @@ select {
     outline-offset: 0;
   }
 }
+
+// Windows High Contrast mode
+@media (forced-colors: active) {
+  *:focus {
+    outline: solid 1px transparent;
+  }
+}

From db25d1045e363915a0915f5c130e806791ca0f15 Mon Sep 17 00:00:00 2001
From: Actions Auto Build <actions@github.com>
Date: Wed, 12 Jan 2022 18:13:26 +0000
Subject: [PATCH 23/45] Stylelint auto-fixes

---
 src/actionlist/action-list-item.scss | 3 ++-
 src/marketing/buttons/button.scss    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index 37931124a3..c2416d16f6 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -236,7 +236,8 @@
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition:
+        visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 314d1840d4..27600d084e 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -13,7 +13,8 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders

From 303b5a3d8f57ff94935b36b2af06dc6fd4ca3fc9 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 12 Jan 2022 12:01:32 -0800
Subject: [PATCH 24/45] fixes

---
 src/buttons/misc.scss      | 2 +-
 src/utilities/details.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 3aaa26700f..980b940d06 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -55,7 +55,7 @@
     color: var(--color-accent-fg);
     background: none;
     border-color: var(--color-btn-active-border);
-    // this might be wrong here, test
+
     @include focusOutline;
   }
 
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index 4b0ad0275a..dc8456c810 100644
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@@ -31,6 +31,10 @@
   > summary::-webkit-details-marker {
     display: none;
   }
+
+  &:focus {
+    @include focusOutline;
+  }
 }
 
 .details-overlay > summary {

From 33af9b5afc09b53ab68b781fda957f184b0e7a49 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 13 Jan 2022 13:19:00 -0800
Subject: [PATCH 25/45] add focus style testing page

---
 .../components/Forms/FormGroups.stories.jsx   | 165 ------------------
 .../Marketing/MarketingButton.stories.jsx     |   6 +-
 .../Marketing/MarketingLink.stories.jsx       |   6 +-
 .../stories/patterns/FocusStyles.stories.jsx  |  52 ++++++
 4 files changed, 58 insertions(+), 171 deletions(-)
 delete mode 100644 docs/src/stories/components/Forms/FormGroups.stories.jsx
 create mode 100644 docs/src/stories/patterns/FocusStyles.stories.jsx

diff --git a/docs/src/stories/components/Forms/FormGroups.stories.jsx b/docs/src/stories/components/Forms/FormGroups.stories.jsx
deleted file mode 100644
index 84b6d764ac..0000000000
--- a/docs/src/stories/components/Forms/FormGroups.stories.jsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import {InputTemplate} from './Input.stories'
-
-export default {
-  title: 'Components/Forms/FormGroup',
-  parameters: {
-    layout: 'padded'
-  },
-  decorators: [
-    Story => (
-      <form>
-        <Story />
-      </form>
-    )
-  ],
-  excludeStories: ['FormGroupTemplate'],
-  argTypes: {
-    size: {
-      options: [0, 1, 2], // iterator
-      mapping: [null, 'input-sm', 'input-lg'], // values
-      control: {
-        type: 'select',
-        labels: ['default', 'small', 'large']
-      },
-      table: {
-        category: 'CSS'
-      }
-    },
-    block: {
-      description: 'full width',
-      control: {type: 'boolean'},
-      table: {
-        category: 'Interactive'
-      }
-    },
-    monospace: {
-      description: 'monospace text',
-      control: {type: 'boolean'},
-      table: {
-        category: 'Interactive'
-      }
-    },
-    contrast: {
-      description: 'change input background to light gray',
-      control: {type: 'boolean'},
-      table: {
-        category: 'Interactive'
-      }
-    },
-    disabled: {
-      description: 'disabled field',
-      control: {type: 'boolean'},
-      table: {
-        category: 'Interactive'
-      }
-    },
-    hideWebKit: {
-      description: 'hide WebKit autofill icon',
-      control: {type: 'boolean'},
-      table: {
-        category: 'Interactive'
-      }
-    },
-    placeholder: {
-      type: 'string',
-      name: 'placeholder',
-      description: 'string',
-      table: {
-        category: 'HTML'
-      }
-    },
-    label: {
-      type: 'string',
-      name: 'label',
-      description: 'string',
-      table: {
-        category: 'HTML'
-      }
-    },
-    type: {
-      name: 'type',
-      type: 'string',
-      description: 'type',
-      table: {
-        category: 'HTML'
-      }
-    },
-    id: {
-      name: 'id',
-      type: 'string',
-      description: 'id',
-      table: {
-        category: 'HTML'
-      }
-    },
-    focusElement: {
-      control: {type: 'boolean'},
-      description: 'set focus on element',
-      table: {
-        category: 'Interactive'
-      }
-    },
-    focusAllElements: {
-      control: {type: 'boolean'},
-      description: 'set focus on all elements for viewing in all themes',
-      table: {
-        category: 'Interactive'
-      }
-    }
-  }
-}
-
-const focusMethod = function getFocus() {
-  // find the focusable element
-  var input = document.getElementsByTagName('input')[0]
-  // set focus on element
-  input.focus()
-}
-
-export const FormGroupTemplate = ({
-  label,
-  type,
-  id,
-  size,
-  block,
-  placeholder,
-  contrast,
-  disabled,
-  hideWebKit,
-  monospace,
-  focusElement,
-  focusAllElements
-}) => (
-  <>
-    <form class="pb-6">
-      <div class="form-group errored">
-        <div class="form-group-header">
-          <label for="username-input">Username</label>
-        </div>
-        <div class="form-group-body">
-          <InputTemplate {...InputTemplate.args} />
-        </div>
-        <p class="note error" id="username-input-validation">
-          monalisa is not available. monalisa-beep, monalisa-cyber, or monalisa87 are available.
-        </p>
-      </div>
-    </form>
-  </>
-)
-
-export const Playground = FormGroupTemplate.bind({})
-Playground.args = {
-  type: 'email',
-  id: 'some-id',
-  placeholder: 'Email address',
-  label: 'Enter email address',
-  block: false,
-  hideWebKit: false,
-  monospace: false,
-  contrast: false,
-  disabled: false,
-  focusElement: false,
-  focusAllElements: false
-}
diff --git a/docs/src/stories/components/Marketing/MarketingButton.stories.jsx b/docs/src/stories/components/Marketing/MarketingButton.stories.jsx
index 69ef74016b..d523944fc7 100644
--- a/docs/src/stories/components/Marketing/MarketingButton.stories.jsx
+++ b/docs/src/stories/components/Marketing/MarketingButton.stories.jsx
@@ -7,7 +7,7 @@ export default {
     layout: 'padded'
   },
 
-  excludeStories: ['ButtonTemplate'],
+  excludeStories: ['MarketingButtonTemplate'],
   argTypes: {
     variant: {
       options: [0, 1, 2, 3], // iterator
@@ -77,7 +77,7 @@ const focusMethod = function getFocus() {
   button.focus()
 }
 
-export const ButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
+export const MarketingButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
   <>
     <button
       disabled={disabled}
@@ -111,7 +111,7 @@ export const ButtonTemplate = ({label, variant, disabled, size, animated, focusE
   </>
 )
 
-export const Playground = ButtonTemplate.bind({})
+export const Playground = MarketingButtonTemplate.bind({})
 Playground.args = {
   animated: false,
   focusElement: false,
diff --git a/docs/src/stories/components/Marketing/MarketingLink.stories.jsx b/docs/src/stories/components/Marketing/MarketingLink.stories.jsx
index 028b067f09..5acd98b70f 100644
--- a/docs/src/stories/components/Marketing/MarketingLink.stories.jsx
+++ b/docs/src/stories/components/Marketing/MarketingLink.stories.jsx
@@ -7,7 +7,7 @@ export default {
     layout: 'padded'
   },
 
-  excludeStories: ['LinkTemplate'],
+  excludeStories: ['MarketingLinkTemplate'],
   argTypes: {
     size: {
       options: [0, 1], // iterator
@@ -67,7 +67,7 @@ const focusMethod = function getFocus() {
   link.focus()
 }
 
-export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
+export const MarketingLinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
   <>
     <a
       href={href}
@@ -98,7 +98,7 @@ export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAl
   </>
 )
 
-export const Playground = LinkTemplate.bind({})
+export const Playground = MarketingLinkTemplate.bind({})
 Playground.args = {
   label: 'Link label',
   href: '/',
diff --git a/docs/src/stories/patterns/FocusStyles.stories.jsx b/docs/src/stories/patterns/FocusStyles.stories.jsx
new file mode 100644
index 0000000000..8ffe644780
--- /dev/null
+++ b/docs/src/stories/patterns/FocusStyles.stories.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from '../components/Button/Button.stories.jsx'
+import {CheckboxTemplate} from '../components/Forms/Checkbox.stories.jsx'
+import {InputTemplate} from '../components/Forms/Input.stories.jsx'
+import {SelectTemplate} from '../components/Forms/Select.stories.jsx'
+import {TextareaTemplate} from '../components/Forms/Textarea.stories.jsx'
+import {LinkTemplate} from '../components/Link/Link.stories.jsx'
+import {MarketingButtonTemplate} from '../components/Marketing/MarketingButton.stories.jsx'
+import {MarketingLinkTemplate} from '../components/Marketing/MarketingLink.stories.jsx'
+import {TabNavTemplate} from '../components/Navigation/TabNav.stories.jsx'
+import {TabNavItemTemplate} from '../components/Navigation/TabNavItem.stories.jsx'
+
+export default {
+  title: 'Patterns/FocusStyles',
+  layout: 'padded'
+}
+
+export const FocusStyles = ({}) => (
+  <div style={{display: 'flex', flexDirection: 'column', gap: '2rem'}}>
+    <div style={{display: 'flex', gap: '0.5rem'}}>
+      <ButtonTemplate variant="btn-primary" label="Primary" />
+      <ButtonTemplate variant="btn-secondary" label="Secondary" />
+      <ButtonTemplate variant="btn-outline" label="Outline" />
+      <ButtonTemplate variant="btn-danger" label="Danger" />
+      <ButtonTemplate variant="btn-link" label="Link" />
+      <ButtonTemplate variant="btn-invisible" label="Invisible" />
+      <ButtonTemplate variant="btn-primary" label="Primary" disabled />
+      <ButtonTemplate variant="btn-secondary" label="Secondary" disabled />
+      <ButtonTemplate variant="btn-outline" label="Outline" disabled />
+      <ButtonTemplate variant="btn-danger" label="Danger" disabled />
+      <ButtonTemplate variant="btn-link" label="Link" disabled />
+      <ButtonTemplate variant="btn-invisible" label="Invisible" disabled />
+    </div>
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <CheckboxTemplate label="checkbox" type="checkbox" />
+      <CheckboxTemplate label="radio" type="radio" />
+      <InputTemplate label="input" type="text" />
+      <SelectTemplate label="select" />
+      <TextareaTemplate label="textarea" />
+      <LinkTemplate label="Link" />
+      <MarketingButtonTemplate label="Marketing Button" />
+      <MarketingLinkTemplate label="Marketing Link" />
+    </div>
+    <div>
+      <TabNavTemplate>
+        <TabNavItemTemplate text="First tab" ariaCurrent="location" href="#url" />
+        <TabNavItemTemplate text="Second tab" />
+      </TabNavTemplate>
+    </div>
+  </div>
+)

From 457a0a793803a118d2a53ad399d43b8564f043d2 Mon Sep 17 00:00:00 2001
From: Actions Auto Build <actions@github.com>
Date: Thu, 13 Jan 2022 21:21:43 +0000
Subject: [PATCH 26/45] Stylelint auto-fixes

---
 src/actionlist/action-list-item.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index d2e0f1a95b..f5ed0c7d63 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -271,7 +271,8 @@
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition:
+        visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 

From a53a2adda8eaedc0ce8d4fb055ade3a1b6f06c8f Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Fri, 14 Jan 2022 07:21:25 -0800
Subject: [PATCH 27/45] add href for testing

---
 docs/src/stories/patterns/FocusStyles.stories.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/stories/patterns/FocusStyles.stories.jsx b/docs/src/stories/patterns/FocusStyles.stories.jsx
index 8ffe644780..29ed9e6143 100644
--- a/docs/src/stories/patterns/FocusStyles.stories.jsx
+++ b/docs/src/stories/patterns/FocusStyles.stories.jsx
@@ -38,14 +38,14 @@ export const FocusStyles = ({}) => (
       <InputTemplate label="input" type="text" />
       <SelectTemplate label="select" />
       <TextareaTemplate label="textarea" />
-      <LinkTemplate label="Link" />
+      <LinkTemplate label="Link" href="/" />
       <MarketingButtonTemplate label="Marketing Button" />
-      <MarketingLinkTemplate label="Marketing Link" />
+      <MarketingLinkTemplate label="Marketing Link" href="/" />
     </div>
     <div>
       <TabNavTemplate>
         <TabNavItemTemplate text="First tab" ariaCurrent="location" href="#url" />
-        <TabNavItemTemplate text="Second tab" />
+        <TabNavItemTemplate text="Second tab" href="#url" />
       </TabNavTemplate>
     </div>
   </div>

From 75615c7b4faad9599bd7ccba7ba0ea7bccc92df6 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Fri, 14 Jan 2022 11:29:42 -0800
Subject: [PATCH 28/45] remove position relative to fix chrome bug

---
 src/support/mixins/misc.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 64a6c95c07..7f4daa0cad 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -28,8 +28,6 @@
 // global focus styles
 
 @mixin focusOutline {
-  position: relative;
-  z-index: 1;
   outline: 2px solid var(--color-accent-fg);
   outline-offset: 2px;
 }

From 592f4a3b907700091d50e618fe7d7bf27ea06137 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Fri, 14 Jan 2022 12:33:12 -0800
Subject: [PATCH 29/45] fix details scenario

---
 src/utilities/details.scss | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index dc8456c810..21b7d38870 100644
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@@ -22,6 +22,20 @@
   // Remove marker added by the display: list-item browser default
   > summary {
     list-style: none;
+    // fallback :focus state
+    &:focus {
+      @include focusOutline;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutline;
+    }
   }
   // Remove marker added by details polyfill
   > summary::before {
@@ -31,14 +45,21 @@
   > summary::-webkit-details-marker {
     display: none;
   }
+}
 
+.details-overlay > summary {
+  // fallback :focus state
   &:focus {
     @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
   }
-}
 
-.details-overlay > summary {
-  &:focus {
+  // default focus state
+  &:focus-visible {
     @include focusOutline;
   }
 }

From a7078ae67591896a9dee4a263f86a287fc0d5ef4 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Fri, 14 Jan 2022 13:49:21 -0800
Subject: [PATCH 30/45] add offset to WHC

---
 src/base/base.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/base/base.scss b/src/base/base.scss
index 7bec499250..2b5175899f 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -135,5 +135,6 @@ select {
 @media (forced-colors: active) {
   *:focus {
     outline: solid 1px transparent;
+    outline-offset: 2px;
   }
 }

From 2b41913035ee37aaa220e07d846711c5fdf43b21 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Fri, 14 Jan 2022 14:07:03 -0800
Subject: [PATCH 31/45] maintain offset specificity in whc

---
 src/base/base.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 2b5175899f..9822912600 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -133,8 +133,17 @@ select {
 
 // Windows High Contrast mode
 @media (forced-colors: active) {
-  *:focus {
+  *:focus,
+  *:focus-visible {
     outline: solid 1px transparent;
-    outline-offset: 2px;
+  }
+
+  input:not([type='radio'], [type='checkbox']),
+  textarea,
+  select {
+    &:focus,
+    &:focus-visible {
+      outline-offset: 2px;
+    }
   }
 }

From 74fc060f030db39b308794a9e06ab62416499838 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Fri, 14 Jan 2022 14:33:34 -0800
Subject: [PATCH 32/45] inset tabnav focus

---
 src/navigation/tabnav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss
index b3e9518deb..60959b3db1 100644
--- a/src/navigation/tabnav.scss
+++ b/src/navigation/tabnav.scss
@@ -48,7 +48,7 @@
 
   &:focus,
   &:focus-visible {
-    outline-offset: -2px;
+    outline-offset: -6px;
   }
 
   &:active {

From 6381c0a7cb7b7d1dede36272b67aad47a446a0b5 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 8 Mar 2022 08:02:37 -0800
Subject: [PATCH 33/45] switch offset to inset

---
 src/base/base.scss           |  6 ++----
 src/buttons/button.scss      | 15 +++++++++++++++
 src/buttons/misc.scss        |  5 +++++
 src/support/mixins/misc.scss |  6 +++---
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 9822912600..b1fea34421 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -113,12 +113,10 @@ select {
   }
 }
 
-input:not([type='radio'], [type='checkbox']),
-textarea,
-select {
+a {
   &:focus,
   &:focus-visible {
-    outline-offset: 0;
+    outline-offset: 2px;
   }
 }
 
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index b0d8223fd2..4003c1c5ab 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -117,6 +117,21 @@
     border-color: var(--color-btn-primary-hover-border);
   }
 
+  // fallback :focus state
+  &:focus {
+    @include focusOutline(var(--color-fg-on-emphasis), -4px);
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline(var(--color-fg-on-emphasis), -4px);
+  }
+
   &:active,
   &.selected,
   &[aria-selected='true'] {
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 980b940d06..8d80f698a6 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -20,6 +20,11 @@
     text-decoration: underline;
   }
 
+  &:focus,
+  &:focus-visible {
+    outline-offset: 2px;
+  }
+
   &:disabled,
   &[aria-disabled='true'] {
     &,
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 7f4daa0cad..5c3b209a09 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -27,7 +27,7 @@
 
 // global focus styles
 
-@mixin focusOutline {
-  outline: 2px solid var(--color-accent-fg);
-  outline-offset: 2px;
+@mixin focusOutline($outlineColor: var(--color-accent-fg), $outlineOffset: -2px) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
 }

From 7e4b863cdc8aec51c7c83a540405a20d03700285 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 8 Mar 2022 08:25:38 -0800
Subject: [PATCH 34/45] fix actionlist focus

---
 src/actionlist/action-list-item.scss | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index 714772e0bb..7068d7cfd4 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -23,12 +23,6 @@
     cursor: pointer;
   }
 
-  // li only: focus, a href: focus-within on li
-  &:focus,
-  &:focus-within {
-    @include focusOutline;
-  }
-
   // only hover li without list as children
   &:not(.ActionList-item--hasSubItem),
   // target contents of first child li if sub-item (li wraps item label + nested ul)
@@ -312,8 +306,9 @@
     text-decoration: none;
   }
 
+  &:focus,
   &:focus-visible {
-    @include focusOutline;
+    outline-offset: -2px;
   }
 
   // disabled

From 60be9a874b63e795ee17775aeb445154640e10e0 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 8 Mar 2022 09:35:33 -0800
Subject: [PATCH 35/45] lint

---
 src/actionlist/action-list-item.scss |  3 ++-
 src/forms/form-group.scss            | 24 +++++++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index 7068d7cfd4..b3ad7e0dda 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -184,7 +184,8 @@
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition:
+        visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index 568290b024..c9fb2836df 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -202,9 +202,11 @@
   &.successed {
     .success {
       color: var(--color-fg-default);
-      background-color: var(
-        --color-canvas-default
-      ); // Makes sure the background is opaque to cover any content underneath
+      background-color:
+        var(
+          --color-canvas-default
+        ); // Makes sure the background is opaque to cover any content underneath
+
       background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
       border-color: var(--color-success-muted);
 
@@ -225,9 +227,11 @@
 
     .warning {
       color: var(--color-fg-default);
-      background-color: var(
-        --color-canvas-default
-      ); // Makes sure the background is opaque to cover any content underneath
+      background-color:
+        var(
+          --color-canvas-default
+        ); // Makes sure the background is opaque to cover any content underneath
+
       background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
       border-color: var(--color-attention-muted);
 
@@ -252,9 +256,11 @@
 
     .error {
       color: var(--color-fg-default);
-      background-color: var(
-        --color-canvas-default
-      ); // Makes sure the background is opaque to cover any content underneath
+      background-color:
+        var(
+          --color-canvas-default
+        ); // Makes sure the background is opaque to cover any content underneath
+
       background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
       border-color: var(--color-danger-muted);
 

From a900e3573d7711f380ea086941a093af2f642f1f Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Thu, 17 Mar 2022 17:18:31 -0700
Subject: [PATCH 36/45] better scoping, handle forms for safari

---
 .../stories/patterns/FocusStyles.stories.jsx  | 28 +++++++++++
 src/base/base.scss                            | 50 +++++++++++++++----
 src/buttons/button.scss                       |  4 +-
 src/marketing/buttons/button.scss             | 18 ++++++-
 src/navigation/underline-nav.scss             |  6 +--
 src/support/mixins/misc.scss                  |  6 +++
 6 files changed, 95 insertions(+), 17 deletions(-)

diff --git a/docs/src/stories/patterns/FocusStyles.stories.jsx b/docs/src/stories/patterns/FocusStyles.stories.jsx
index 29ed9e6143..1494eb15fc 100644
--- a/docs/src/stories/patterns/FocusStyles.stories.jsx
+++ b/docs/src/stories/patterns/FocusStyles.stories.jsx
@@ -48,5 +48,33 @@ export const FocusStyles = ({}) => (
         <TabNavItemTemplate text="Second tab" href="#url" />
       </TabNavTemplate>
     </div>
+    <div class="BtnGroup">
+      <a href="/" class="btn-sm btn BtnGroup-item">
+        One
+      </a>
+      <a href="/" class="btn-sm btn BtnGroup-item">
+        Two
+      </a>
+    </div>
+    <div class="Box faketarget">:target styles</div>
+    <nav class="UnderlineNav" aria-label="Foo bar">
+      <div class="UnderlineNav-body">
+        <a class="UnderlineNav-item" href="#url" aria-current="page">
+          Item 1
+        </a>
+        <a class="UnderlineNav-item" href="#url">
+          Item 2
+        </a>
+        <a class="UnderlineNav-item" href="#url">
+          Item 3
+        </a>
+        <a class="UnderlineNav-item" href="#url">
+          Item 4
+        </a>
+      </div>
+      <div class="UnderlineNav-actions">
+        <a class="btn btn-sm">Button</a>
+      </div>
+    </nav>
   </div>
 )
diff --git a/src/base/base.scss b/src/base/base.scss
index b1fea34421..bb50628c95 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -91,12 +91,22 @@ details {
 
 // global focus styles
 
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
+  border-color: var(--color-accent-fg);
+  outline: none;
+  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
+}
+
+// form controls
+// target styles
+
 a,
 button,
 [role='button'],
-input,
-textarea,
-select {
+input[type='radio'],
+input[type='checkbox'] {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
   // fallback :focus state
   &:focus {
     @include focusOutline;
@@ -113,22 +123,44 @@ select {
   }
 }
 
-a {
+a:not([class]),
+input[type='radio'],
+input[type='checkbox'] {
   &:focus,
   &:focus-visible {
     outline-offset: 2px;
   }
 }
 
-// for handling focus conditionally
-.focus {
-  @include focusOutline;
+// Primer form controls
+.form-control {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+  &:focus {
+    @include focusBoxShadowInset;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      border-color: transparent;
+      @include focusBoxShadowInset(1px, transparent);
+    }
+  }
 
-  &:is(input, textarea, select) {
-    outline-offset: 0;
+  // default focus state
+  &:focus-visible {
+    @include focusBoxShadowInset;
   }
 }
 
+.faketarget {
+  @include focusBoxShadowInset;
+}
+
+// for handling focus conditionally
+.focus {
+  @include focusBoxShadowInset;
+}
+
 // Windows High Contrast mode
 @media (forced-colors: active) {
   *:focus,
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index f0011e8546..6c4539731d 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -119,7 +119,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(var(--color-fg-on-emphasis), -4px);
+    @include focusOutlineOnEmphasis;
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -129,7 +129,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(var(--color-fg-on-emphasis), -4px);
+    @include focusOutlineOnEmphasis;
   }
 
   &:active,
diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 27600d084e..570fcd4a64 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -13,8 +13,7 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
@@ -53,6 +52,21 @@
     }
   }
 
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
+
   &:active {
     &::before {
       opacity: 0.5 !important;
diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss
index f188899df1..2f4a269f37 100644
--- a/src/navigation/underline-nav.scss
+++ b/src/navigation/underline-nav.scss
@@ -29,8 +29,7 @@
     color: var(--color-fg-default);
     text-decoration: none;
     border-bottom-color: var(--color-neutral-muted);
-    outline: 1px dotted transparent; // Support Firefox custom colors
-    outline-offset: -1px;
+    outline-offset: -8px;
     transition: border-bottom-color 0.12s ease-out;
   }
 
@@ -40,8 +39,7 @@
     font-weight: $font-weight-bold;
     color: var(--color-fg-default);
     border-bottom-color: var(--color-primer-border-active);
-    outline: 1px dotted transparent; // Support Firefox custom colors
-    outline-offset: -1px;
+    outline-offset: -8px;
 
     .UnderlineNav-octicon {
       color: var(--color-fg-muted);
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 5cb7d2fdc3..4e1a88a7da 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -32,3 +32,9 @@
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
 }
+
+@mixin focusOutlineOnEmphasis($outlineColor: var(--color-accent-fg), $outlineOffset: 0px) {
+  outline: 2px solid $outlineColor;
+  box-shadow: inset 0 0 0 2px var(--color-fg-on-emphasis);
+  outline-offset: $outlineOffset;
+}

From aa7e158389a811565ff2566806876ddf589b8e65 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Mon, 11 Apr 2022 11:21:39 -0700
Subject: [PATCH 37/45] moving specific styles from dotcom

---
 .../stories/components/Link/Link.stories.jsx  |  2 +-
 .../stories/patterns/FocusStyles.stories.jsx  |  9 ++++-
 src/actionlist/action-list-item.scss          | 16 ++++++--
 src/base/base.scss                            | 20 ----------
 src/buttons/button.scss                       | 24 ++++++++++-
 src/buttons/misc.scss                         | 17 +++++---
 src/forms/form-control.scss                   | 17 ++++++++
 src/marketing/buttons/button.scss             | 17 ++++++++
 src/navigation/tabnav.scss                    |  1 +
 src/navigation/underline-nav.scss             |  3 +-
 src/support/mixins/misc.scss                  | 36 +++++++++++++++--
 src/utilities/details.scss                    | 40 +++++++++++++++++++
 12 files changed, 164 insertions(+), 38 deletions(-)

diff --git a/docs/src/stories/components/Link/Link.stories.jsx b/docs/src/stories/components/Link/Link.stories.jsx
index b153ae71dd..a4a43380f6 100644
--- a/docs/src/stories/components/Link/Link.stories.jsx
+++ b/docs/src/stories/components/Link/Link.stories.jsx
@@ -71,7 +71,7 @@ export const LinkTemplate = ({label, variant, href, noUnderline, focusElement, f
   <>
     <a
       href={href}
-      className={clsx(variant && `${variant}`, noUnderline && 'no-underline', focusAllElements && 'focus')}
+      className={clsx('Link', variant && `${variant}`, noUnderline && 'no-underline', focusAllElements && 'focus')}
     >
       {label}
     </a>
diff --git a/docs/src/stories/patterns/FocusStyles.stories.jsx b/docs/src/stories/patterns/FocusStyles.stories.jsx
index 1494eb15fc..7d1abf5064 100644
--- a/docs/src/stories/patterns/FocusStyles.stories.jsx
+++ b/docs/src/stories/patterns/FocusStyles.stories.jsx
@@ -25,6 +25,12 @@ export const FocusStyles = ({}) => (
       <ButtonTemplate variant="btn-danger" label="Danger" />
       <ButtonTemplate variant="btn-link" label="Link" />
       <ButtonTemplate variant="btn-invisible" label="Invisible" />
+      <ButtonTemplate
+        variant="btn-octicon"
+        leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+            <path d="M8 16c.9 0 1.7-.6 1.9-1.5.1-.3-.1-.5-.4-.5h-3c-.3 0-.5.2-.4.5.2.9 1 1.5 1.9 1.5zM3 5c0-2.8 2.2-5 5-5s5 2.2 5 5v3l1.7 2.6c.2.2.3.5.3.8 0 .8-.7 1.5-1.5 1.5h-11c-.8.1-1.5-.6-1.5-1.4 0-.3.1-.6.3-.8L3 8.1V5z"></path>
+          </svg>`}
+      />
       <ButtonTemplate variant="btn-primary" label="Primary" disabled />
       <ButtonTemplate variant="btn-secondary" label="Secondary" disabled />
       <ButtonTemplate variant="btn-outline" label="Outline" disabled />
@@ -38,7 +44,8 @@ export const FocusStyles = ({}) => (
       <InputTemplate label="input" type="text" />
       <SelectTemplate label="select" />
       <TextareaTemplate label="textarea" />
-      <LinkTemplate label="Link" href="/" />
+      <LinkTemplate label="Primer link" href="/" />
+      <a href="/">Link with no CSS class</a>
       <MarketingButtonTemplate label="Marketing Button" />
       <MarketingLinkTemplate label="Marketing Link" href="/" />
     </div>
diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index b3ad7e0dda..45534d2bb0 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -184,8 +184,7 @@
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition:
-        visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
@@ -307,9 +306,18 @@
     text-decoration: none;
   }
 
-  &:focus,
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
   &:focus-visible {
-    outline-offset: -2px;
+    @include focusOutline;
   }
 
   // disabled
diff --git a/src/base/base.scss b/src/base/base.scss
index bb50628c95..b5e66f58ee 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -132,26 +132,6 @@ input[type='checkbox'] {
   }
 }
 
-// Primer form controls
-.form-control {
-  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-  transition-property: color, background-color, box-shadow, border-color;
-  &:focus {
-    @include focusBoxShadowInset;
-
-    // remove fallback :focus if :focus-visible is supported
-    &:not(:focus-visible) {
-      border-color: transparent;
-      @include focusBoxShadowInset(1px, transparent);
-    }
-  }
-
-  // default focus state
-  &:focus-visible {
-    @include focusBoxShadowInset;
-  }
-}
-
 .faketarget {
   @include focusBoxShadowInset;
 }
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 6c4539731d..2f7836b1dc 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -66,8 +66,8 @@
   background-color: var(--color-btn-bg);
   border-color: var(--color-btn-border);
   box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
 
   &:hover,
   &.hover,
@@ -124,6 +124,7 @@
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
       outline: solid 1px transparent;
+      box-shadow: none;
     }
   }
 
@@ -161,6 +162,25 @@
   }
 }
 
+// ensure links styled as button primary gets proper focus style
+a.btn-primary {
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
+}
+
 // Outline button
 
 .btn-outline {
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 8d80f698a6..d3239ed340 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -20,11 +20,6 @@
     text-decoration: underline;
   }
 
-  &:focus,
-  &:focus-visible {
-    outline-offset: 2px;
-  }
-
   &:disabled,
   &[aria-disabled='true'] {
     &,
@@ -33,6 +28,13 @@
       cursor: default;
     }
   }
+
+  &:not(.dropdown-item, .social-reaction-summary-item) {
+    &:focus,
+    &:focus-visible {
+      border-radius: $border-radius;
+    }
+  }
 }
 
 // Invisible button
@@ -98,6 +100,11 @@
     color: var(--color-accent-fg);
   }
 
+  &:focus,
+  &:focus-visible {
+    border-radius: $border-radius;
+  }
+
   &.disabled,
   &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 9c75b8f9b0..992fa601e7 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -30,6 +30,23 @@ label {
   border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
   box-shadow: var(--color-primer-shadow-inset);
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+
+  &:focus {
+    @include focusBoxShadowInset;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      border-color: transparent;
+      @include focusBoxShadowInset(1px, transparent);
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusBoxShadowInset;
+  }
 
   &[disabled] {
     color: var(--color-primer-fg-disabled);
diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 570fcd4a64..f022fec3da 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -59,6 +59,7 @@
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
       outline: solid 1px transparent;
+      box-shadow: none;
     }
   }
 
@@ -129,6 +130,22 @@
     // stylelint-disable-next-line primer/colors
     background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
   }
+
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
 }
 
 // Size modifiers
diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss
index 60959b3db1..1df230af96 100644
--- a/src/navigation/tabnav.scss
+++ b/src/navigation/tabnav.scss
@@ -48,6 +48,7 @@
 
   &:focus,
   &:focus-visible {
+    border-radius: $border-radius $border-radius 0 0 !important;
     outline-offset: -6px;
   }
 
diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss
index 2f4a269f37..3e8761be8b 100644
--- a/src/navigation/underline-nav.scss
+++ b/src/navigation/underline-nav.scss
@@ -25,7 +25,8 @@
   border-bottom: 2px $border-style transparent;
 
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-visible {
     color: var(--color-fg-default);
     text-decoration: none;
     border-bottom-color: var(--color-neutral-muted);
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 4e1a88a7da..32295138a4 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -16,7 +16,7 @@
 
   &::after {
     // stylelint-disable-next-line primer/spacing
-    margin-left: 1px;
+    margin-left: 2px;
     background-color: var(--color-canvas-default);
     background-image: linear-gradient($background, $background);
   }
@@ -28,13 +28,41 @@
 
 // global focus styles
 
-@mixin focusOutline($outlineColor: var(--color-accent-fg), $outlineOffset: -2px) {
+// @mixin focusOutline($outlineColor: var(--color-accent-fg), $outlineOffset: -2px) {
+//   outline: 2px solid $outlineColor;
+//   outline-offset: $outlineOffset;
+// }
+
+// @mixin focusOutlineOnEmphasis($outlineColor: var(--color-accent-fg), $outlineOffset: 0px) {
+//   outline: 2px solid $outlineColor;
+//   box-shadow: inset 0 0 0 2px var(--color-fg-on-emphasis);
+//   outline-offset: $outlineOffset;
+// }
+
+// inset box-shadow for form controls
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
+  border-color: var(--color-accent-fg);
+  outline: none;
+  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
+}
+
+// box-shadow for :target styles (no inset)
+// !important to override PCSS utilities
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
+  outline: none !important;
+  box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
+}
+
+// outline
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
+  box-shadow: none;
 }
 
-@mixin focusOutlineOnEmphasis($outlineColor: var(--color-accent-fg), $outlineOffset: 0px) {
+// outline with fg box-shadow for buttons
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
   outline: 2px solid $outlineColor;
-  box-shadow: inset 0 0 0 2px var(--color-fg-on-emphasis);
   outline-offset: $outlineOffset;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
 }
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index 21b7d38870..6ecb1e580e 100644
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@@ -21,6 +21,8 @@
 .details-reset {
   // Remove marker added by the display: list-item browser default
   > summary {
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
     list-style: none;
     // fallback :focus state
     &:focus {
@@ -36,6 +38,24 @@
     &:focus-visible {
       @include focusOutline;
     }
+
+    &.btn-primary {
+      // fallback :focus state
+      &:focus {
+        @include focusOutlineOnEmphasis;
+
+        // remove fallback :focus if :focus-visible is supported
+        &:not(:focus-visible) {
+          outline: solid 1px transparent;
+          box-shadow: none;
+        }
+      }
+
+      // default focus state
+      &:focus-visible {
+        @include focusOutlineOnEmphasis;
+      }
+    }
   }
   // Remove marker added by details polyfill
   > summary::before {
@@ -48,6 +68,8 @@
 }
 
 .details-overlay > summary {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
   // fallback :focus state
   &:focus {
     @include focusOutline;
@@ -62,4 +84,22 @@
   &:focus-visible {
     @include focusOutline;
   }
+
+  &.btn-primary {
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
+  }
 }

From ba84876f2dec14fb26c16d2274af431ed2cb9284 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Mon, 11 Apr 2022 13:34:35 -0700
Subject: [PATCH 38/45] address autocomplete

---
 .../stories/patterns/FocusStyles.stories.jsx  |  1 +
 src/actionlist/action-list-item.scss          |  3 ++-
 src/autocomplete/autocomplete.scss            | 10 +++----
 src/base/base.scss                            |  2 +-
 src/buttons/button.scss                       |  1 +
 src/buttons/misc.scss                         |  1 +
 src/forms/form-control.scss                   |  9 +++++++
 src/forms/form-group.scss                     | 18 +++----------
 src/forms/input-group.scss                    | 18 ++++++-------
 src/marketing/buttons/button.scss             |  3 ++-
 src/pagination/pagination.scss                | 27 ++++++++++++++++---
 src/utilities/details.scss                    |  4 +--
 12 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/docs/src/stories/patterns/FocusStyles.stories.jsx b/docs/src/stories/patterns/FocusStyles.stories.jsx
index 7d1abf5064..7b3dd2f747 100644
--- a/docs/src/stories/patterns/FocusStyles.stories.jsx
+++ b/docs/src/stories/patterns/FocusStyles.stories.jsx
@@ -42,6 +42,7 @@ export const FocusStyles = ({}) => (
       <CheckboxTemplate label="checkbox" type="checkbox" />
       <CheckboxTemplate label="radio" type="radio" />
       <InputTemplate label="input" type="text" />
+      <input className="form-control border-0" placeholder="no border form control"></input>
       <SelectTemplate label="select" />
       <TextareaTemplate label="textarea" />
       <LinkTemplate label="Primer link" href="/" />
diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index 45534d2bb0..5f4ecb1a83 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -184,7 +184,8 @@
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition:
+        visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index f0bf279e25..aac7ae0fd1 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -31,9 +31,9 @@
   align-items: center;
 
   &:focus-within {
-    border-color: var(--color-accent-emphasis);
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
+    border-color: var(--color-accent-fg);
+
+    @include focusBoxShadowInset;
   }
 
   .form-control {
@@ -42,10 +42,6 @@
     // stylelint-disable-next-line
     border: none;
     box-shadow: none;
-
-    &:focus {
-      box-shadow: none;
-    }
   }
 }
 
diff --git a/src/base/base.scss b/src/base/base.scss
index b5e66f58ee..128226e02e 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type
 * {
   box-sizing: border-box;
 }
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 2f7836b1dc..baaf9edc8e 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -163,6 +163,7 @@
 }
 
 // ensure links styled as button primary gets proper focus style
+// stylelint-disable-next-line selector-no-qualifying-type
 a.btn-primary {
   // fallback :focus state
   &:focus {
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index d3239ed340..7d63952cf7 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -33,6 +33,7 @@
     &:focus,
     &:focus-visible {
       border-radius: $border-radius;
+      outline-offset: 0;
     }
   }
 }
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 992fa601e7..b8eb49990a 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -39,6 +39,7 @@ label {
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
       border-color: transparent;
+
       @include focusBoxShadowInset(1px, transparent);
     }
   }
@@ -48,6 +49,14 @@ label {
     @include focusBoxShadowInset;
   }
 
+  // override form controls with no border in focused state
+  &.border-0 {
+    &:focus,
+    &:focus-visible {
+      border: $border-width $border-style var(--color-accent-fg) !important;
+    }
+  }
+
   &[disabled] {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-input-disabled-bg);
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index bb36b41e39..671676b354 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -209,11 +209,7 @@
   &.successed {
     .success {
       color: var(--color-fg-default);
-      background-color:
-        var(
-          --color-canvas-default
-        ); // Makes sure the background is opaque to cover any content underneath
-
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
       border-color: var(--color-success-muted);
 
@@ -234,11 +230,7 @@
 
     .warning {
       color: var(--color-fg-default);
-      background-color:
-        var(
-          --color-canvas-default
-        ); // Makes sure the background is opaque to cover any content underneath
-
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
       border-color: var(--color-attention-muted);
 
@@ -263,11 +255,7 @@
 
     .error {
       color: var(--color-fg-default);
-      background-color:
-        var(
-          --color-canvas-default
-        ); // Makes sure the background is opaque to cover any content underneath
-
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
       background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
       border-color: var(--color-danger-muted);
 
diff --git a/src/forms/input-group.scss b/src/forms/input-group.scss
index 794d59d48d..01534cb5a4 100644
--- a/src/forms/input-group.scss
+++ b/src/forms/input-group.scss
@@ -21,17 +21,17 @@
 
   // within input group, if button exists change focus styles to match input (no offset)
   &:focus-within {
-        // stylelint-disable-next-line selector-max-type
-        button {
-            outline-offset: 0;
-        }
+    // stylelint-disable-next-line selector-max-type
+    button {
+      outline-offset: 0;
     }
+  }
 
-    // Autocomplete with embedded icon
-    .form-control.autocomplete-embedded-icon-wrap {
-        display: inline-flex;
-        padding: $spacer-1 * 1.25 $spacer-2;
-    }
+  // Autocomplete with embedded icon
+  .form-control.autocomplete-embedded-icon-wrap {
+    display: inline-flex;
+    padding: $spacer-1 * 1.25 $spacer-2;
+  }
 }
 
 .input-group .form-control,
diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index f022fec3da..6af0774bb5 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -13,7 +13,8 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
index 475ef0c044..43090b4e74 100644
--- a/src/pagination/pagination.scss
+++ b/src/pagination/pagination.scss
@@ -24,7 +24,6 @@
     &:focus {
       text-decoration: none;
       border-color: var(--color-border-default);
-      outline: 0;
       transition-duration: 0.1s;
     }
 
@@ -74,13 +73,35 @@
     // chevron-left
     .previous_page::before {
       margin-right: $spacer-1;
-      clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px);
+      clip-path:
+        polygon(
+          9.8px 12.8px,
+          8.7px 12.8px,
+          4.5px 8.5px,
+          4.5px 7.5px,
+          8.7px 3.2px,
+          9.8px 4.3px,
+          6.1px 8px,
+          9.8px 11.7px,
+          9.8px 12.8px
+        );
     }
 
     // chevron-right
     .next_page::after {
       margin-left: $spacer-1;
-      clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px);
+      clip-path:
+        polygon(
+          6.2px 3.2px,
+          7.3px 3.2px,
+          11.5px 7.5px,
+          11.5px 8.5px,
+          7.3px 12.8px,
+          6.2px 11.7px,
+          9.9px 8px,
+          6.2px 4.3px,
+          6.2px 3.2px
+        );
     }
   }
 
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index 6ecb1e580e..df25180e46 100644
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type
 
 .details-overlay[open] > summary::before {
   position: fixed;
@@ -21,9 +21,9 @@
 .details-reset {
   // Remove marker added by the display: list-item browser default
   > summary {
+    list-style: none;
     transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
     transition-property: color, background-color, box-shadow, border-color;
-    list-style: none;
     // fallback :focus state
     &:focus {
       @include focusOutline;

From f84d027edbc28c58dc068ed546b0e97e71897834 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Mon, 11 Apr 2022 13:39:19 -0700
Subject: [PATCH 39/45] cleanup

---
 src/support/mixins/misc.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 32295138a4..7975c3e9fe 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -28,17 +28,6 @@
 
 // global focus styles
 
-// @mixin focusOutline($outlineColor: var(--color-accent-fg), $outlineOffset: -2px) {
-//   outline: 2px solid $outlineColor;
-//   outline-offset: $outlineOffset;
-// }
-
-// @mixin focusOutlineOnEmphasis($outlineColor: var(--color-accent-fg), $outlineOffset: 0px) {
-//   outline: 2px solid $outlineColor;
-//   box-shadow: inset 0 0 0 2px var(--color-fg-on-emphasis);
-//   outline-offset: $outlineOffset;
-// }
-
 // inset box-shadow for form controls
 @mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
   border-color: var(--color-accent-fg);

From dbeb7a82371e690e47331f867a2254686fcc88f3 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Mon, 11 Apr 2022 13:48:25 -0700
Subject: [PATCH 40/45] cleanup

---
 src/base/base.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 128226e02e..36d41bf206 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -91,15 +91,6 @@ details {
 
 // global focus styles
 
-@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
-  border-color: var(--color-accent-fg);
-  outline: none;
-  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
-}
-
-// form controls
-// target styles
-
 a,
 button,
 [role='button'],

From d19fd5d7b461e0b5369c8cba42e6950eea4ef81c Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 19 Apr 2022 16:39:44 -0700
Subject: [PATCH 41/45] selected focus states

---
 src/base/base.scss              |  6 +-----
 src/buttons/button.scss         | 16 ++++++++++++++++
 src/buttons/misc.scss           |  2 +-
 src/links/link.scss             |  5 +++++
 src/navigation/filter-list.scss | 18 ++++++++++++++++++
 src/navigation/subnav.scss      | 18 ++++++++++++++++++
 6 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 36d41bf206..7778f4b5d3 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -119,14 +119,10 @@ input[type='radio'],
 input[type='checkbox'] {
   &:focus,
   &:focus-visible {
-    outline-offset: 2px;
+    outline-offset: 0;
   }
 }
 
-.faketarget {
-  @include focusBoxShadowInset;
-}
-
 // for handling focus conditionally
 .focus {
   @include focusBoxShadowInset;
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index baaf9edc8e..27563db247 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -210,6 +210,22 @@ a.btn-primary {
     background-color: var(--color-btn-outline-selected-bg);
     border-color: var(--color-btn-outline-selected-border);
     box-shadow: var(--color-btn-outline-selected-shadow);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   &:disabled,
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 7d63952cf7..328b2fe27a 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -29,7 +29,7 @@
     }
   }
 
-  &:not(.dropdown-item, .social-reaction-summary-item) {
+  &:not(.dropdown-item) {
     &:focus,
     &:focus-visible {
       border-radius: $border-radius;
diff --git a/src/links/link.scss b/src/links/link.scss
index 80cad058e7..f29cef3d91 100644
--- a/src/links/link.scss
+++ b/src/links/link.scss
@@ -7,6 +7,11 @@
     text-decoration: underline;
     cursor: pointer;
   }
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
 }
 
 .Link--primary {
diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
index 68a317cbaa..9eac3d8aec 100644
--- a/src/navigation/filter-list.scss
+++ b/src/navigation/filter-list.scss
@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Filters list
 //
 // A vertical list of filters.
@@ -45,6 +47,22 @@
   &[aria-current]:not([aria-current='false']) {
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   .count {
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index 89e03e8fa9..58eb8a5e79 100644
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Needs refactoring
 // Sub nav
 .subnav {
@@ -46,6 +48,22 @@
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
     border-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   &:first-child {

From fd71b36e439f7e8000b0b313262ec4503e76a51c Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 19 Apr 2022 17:27:53 -0700
Subject: [PATCH 42/45] adjust marketing focus

---
 src/marketing/buttons/button.scss | 2 +-
 src/marketing/links/link.scss     | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 6af0774bb5..b4c4ef931e 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -19,7 +19,7 @@
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 0.375rem;
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, outline 0.2s ease;
   appearance: none !important;
 
   &::before {
diff --git a/src/marketing/links/link.scss b/src/marketing/links/link.scss
index 8f8171e516..9e87d28ebe 100644
--- a/src/marketing/links/link.scss
+++ b/src/marketing/links/link.scss
@@ -31,14 +31,17 @@
   }
 
   &:hover,
-  &:focus,
-  &:focus-visible,
   &:active {
     &::after {
       transform: scaleX(1);
     }
   }
 
+  &:focus,
+  &:focus-visible {
+    outline-offset: 2px;
+  }
+
   &.arrow-target-mktg {
     .arrow-symbol-mktg {
       margin-left: -$em-spacer-3;

From 33e9712947f26d84991e2d0ebb157973b997b255 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Tue, 19 Apr 2022 17:35:04 -0700
Subject: [PATCH 43/45] use offset instead for marketing

---
 src/marketing/buttons/button.scss | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index b4c4ef931e..5753c694c3 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -13,8 +13,7 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
@@ -55,7 +54,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutlineOnEmphasis;
+    @include focusOutline(2px, var(--color-accent-fg));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -66,7 +65,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutlineOnEmphasis;
+    @include focusOutline(2px, var(--color-accent-fg));
   }
 
   &:active {
@@ -134,7 +133,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutlineOnEmphasis;
+    @include focusOutline(2px, var(--color-accent-fg));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -145,7 +144,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutlineOnEmphasis;
+    @include focusOutline(2px, var(--color-accent-fg));
   }
 }
 

From be2ab1acd5fb767685f9c066b07c23ad07328ce9 Mon Sep 17 00:00:00 2001
From: Actions Auto Build <actions@github.com>
Date: Wed, 20 Apr 2022 15:13:33 +0000
Subject: [PATCH 44/45] Stylelint auto-fixes

---
 src/marketing/buttons/button.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 5753c694c3..854b3ec31f 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -13,7 +13,8 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders

From f84874e4017c89331a3951551e6bfa31263e01c5 Mon Sep 17 00:00:00 2001
From: langermank <langermank@github.com>
Date: Wed, 20 Apr 2022 09:35:27 -0700
Subject: [PATCH 45/45] fix merge

---
 src/navigation/underline-nav.scss | 83 ++++++++++++++++---------------
 src/support/mixins/misc.scss      |  1 +
 2 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss
index b4de567278..c33adffc76 100644
--- a/src/navigation/underline-nav.scss
+++ b/src/navigation/underline-nav.scss
@@ -1,3 +1,4 @@
+// stylelint-disable selector-max-specificity
 $nav-height: $spacer-3 * 3 !default; // 48px
 
 .UnderlineNav {
@@ -43,51 +44,51 @@ $nav-height: $spacer-3 * 3 !default; // 48px
     outline-offset: -8px;
     transition: border-bottom-color 0.12s ease-out;
 
-  // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
-  [data-content]::before {
-    display: block;
-    height: 0;
-    font-weight: $font-weight-bold;
-    visibility: hidden;
-    content: attr(data-content);
-  }
-
-  // increase touch target area
-  &::before {
-    @include minTouchTarget($min-height: $nav-height);
-  }
-
-  // hover state was "sticking" on mobile after click
-  @media (pointer: fine) {
-    &:hover {
-      color: var(--color-fg-default);
-      text-decoration: none;
-      background: var(--color-action-list-item-default-hover-bg);
-      transition: background 0.12s ease-out;
+    // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
+    [data-content]::before {
+      display: block;
+      height: 0;
+      font-weight: $font-weight-bold;
+      visibility: hidden;
+      content: attr(data-content);
     }
 
-  }
+    // increase touch target area
+    &::before {
+      @include minTouchTarget($min-height: $nav-height);
+    }
 
-  &.selected,
-  &[role='tab'][aria-selected='true'],
-  &[aria-current]:not([aria-current='false']) {
-    font-weight: $font-weight-bold;
-    color: var(--color-fg-default);
-    border-bottom-color: var(--color-primer-border-active);
-    outline-offset: -8px;
+    // hover state was "sticking" on mobile after click
+    @media (pointer: fine) {
+      &:hover {
+        color: var(--color-fg-default);
+        text-decoration: none;
+        background: var(--color-action-list-item-default-hover-bg);
+        transition: background 0.12s ease-out;
+      }
+    }
 
-    // current/selected underline
-    &::after {
-      position: absolute;
-      right: 50%;
-      // 48px total height / 2 (24px) + 1px
-      bottom: calc(50% - 25px);
-      width: 100%;
-      height: 2px;
-      content: '';
-      background: var(--color-primer-border-active);
-      border-radius: $border-radius;
-      transform: translate(50%, -50%);
+    &.selected,
+    &[role='tab'][aria-selected='true'],
+    &[aria-current]:not([aria-current='false']) {
+      font-weight: $font-weight-bold;
+      color: var(--color-fg-default);
+      border-bottom-color: var(--color-primer-border-active);
+      outline-offset: -8px;
+
+      // current/selected underline
+      &::after {
+        position: absolute;
+        right: 50%;
+        // 48px total height / 2 (24px) + 1px
+        bottom: calc(50% - 25px);
+        width: 100%;
+        height: 2px;
+        content: '';
+        background: var(--color-primer-border-active);
+        border-radius: $border-radius;
+        transform: translate(50%, -50%);
+      }
     }
   }
 
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index c9cc4c0ec7..90d4eeb1b9 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -54,6 +54,7 @@
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+}
 
 // if min-width is undefined, return only min-height
 @mixin minTouchTarget($min-height: 32px, $min-width: '') {