From ac23a5cca2e6631f85d3de82bb86a9afa03de9f1 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Fri, 20 Sep 2019 10:10:40 +0900
Subject: [PATCH 01/13] Add keyboard-shortcuts.scss

Unchaged from github/.../components/keyboard-shortcuts.scss
---
 src/labels/keyboard-shortcuts.scss | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/labels/keyboard-shortcuts.scss

diff --git a/src/labels/keyboard-shortcuts.scss b/src/labels/keyboard-shortcuts.scss
new file mode 100644
index 0000000000..df20ebae13
--- /dev/null
+++ b/src/labels/keyboard-shortcuts.scss
@@ -0,0 +1,26 @@
+//
+// Keyboard Shortcuts
+//
+// stylelint-disable selector-max-type
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px $mono-font;
+  line-height: 10px;
+  color: $gray-700;
+  vertical-align: middle;
+  background-color: $bg-gray-light;
+  border: solid 1px $gray-300;
+  border-bottom-color: darken($gray-300, 4%);
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 darken($gray-300, 4%);
+}
+
+.badmono {
+  font-family: sans-serif;
+  font-weight: $font-weight-bold;
+}
+
+.kb-shortcut-dialog {
+  min-width: 800px;
+}

From 698707784b19b64b339ddbdcb4104ac6f3d2fad1 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Fri, 20 Sep 2019 15:15:50 +0900
Subject: [PATCH 02/13] Add documentation

---
 docs/content/components/labels.md  | 20 ++++++++++++++++++++
 src/labels/index.scss              |  1 +
 src/labels/keyboard-shortcuts.scss |  1 +
 3 files changed, 22 insertions(+)

diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md
index a832ee287c..f6b49073ca 100644
--- a/docs/content/components/labels.md
+++ b/docs/content/components/labels.md
@@ -135,3 +135,23 @@ Counters can also be used in `Box` headers to indicate the number of items in a
   </ul>
 </div>
 ```
+
+## Keyboard Shortcuts
+
+Wrap keybard shortcuts with `<kbd>` elements. No CSS classes are needed. It will make the shortcuts look like mini keybard keys. If multiple keys need to be pressed at the same time, wrap them in a single `<kbd>`. For example `<kbd>⌘ shift p</kbd>`. If multiple keys don't need to be pressed at the same time, use a `<kbd>` for each key. For example `<kbd>g</kbd> <kbd>d</kbd>`.
+
+
+```html live
+<p>
+  Focus search bar <kbd>s</kbd> or <kbd>/</kbd>
+</p>
+<p>
+  Preview comment <kbd>⌘ shift p</kbd>
+</p>
+<p>
+  Go to dashboard <kbd>g</kbd> <kbd>d</kbd>
+</p>
+<p>
+  Show keyboard shortcuts <kbd>?</kbd>
+</p>
+```
diff --git a/src/labels/index.scss b/src/labels/index.scss
index a86ded9b52..1c358f6693 100644
--- a/src/labels/index.scss
+++ b/src/labels/index.scss
@@ -2,3 +2,4 @@
 @import "./labels.scss";
 @import "./states.scss";
 @import "./counters.scss";
+@import "./keyboard-shortcuts.scss";
diff --git a/src/labels/keyboard-shortcuts.scss b/src/labels/keyboard-shortcuts.scss
index df20ebae13..5632943163 100644
--- a/src/labels/keyboard-shortcuts.scss
+++ b/src/labels/keyboard-shortcuts.scss
@@ -1,5 +1,6 @@
 //
 // Keyboard Shortcuts
+// Note: .markdown-body overrides these styles.
 //
 // stylelint-disable selector-max-type
 kbd {

From a388981e7583699009708646b31931c230978ef0 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Sat, 21 Sep 2019 20:46:03 +0900
Subject: [PATCH 03/13] Remove .kb-shortcut-dialog and .badmono

Is refactored in https://github.com/github/github/pull/124900
---
 src/labels/keyboard-shortcuts.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/labels/keyboard-shortcuts.scss b/src/labels/keyboard-shortcuts.scss
index 5632943163..23d495fdaa 100644
--- a/src/labels/keyboard-shortcuts.scss
+++ b/src/labels/keyboard-shortcuts.scss
@@ -16,12 +16,3 @@ kbd {
   border-radius: 3px;
   box-shadow: inset 0 -1px 0 darken($gray-300, 4%);
 }
-
-.badmono {
-  font-family: sans-serif;
-  font-weight: $font-weight-bold;
-}
-
-.kb-shortcut-dialog {
-  min-width: 800px;
-}

From 6146ef275807e4d0cd1b1900d87b9fc4ac163800 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Sat, 21 Sep 2019 20:49:56 +0900
Subject: [PATCH 04/13] Use variables

---
 src/labels/keyboard-shortcuts.scss | 4 ++--
 src/markdown/markdown-body.scss    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/labels/keyboard-shortcuts.scss b/src/labels/keyboard-shortcuts.scss
index 23d495fdaa..bbec52235b 100644
--- a/src/labels/keyboard-shortcuts.scss
+++ b/src/labels/keyboard-shortcuts.scss
@@ -11,8 +11,8 @@ kbd {
   color: $gray-700;
   vertical-align: middle;
   background-color: $bg-gray-light;
-  border: solid 1px $gray-300;
+  border: $border-style $border-width $gray-300;
   border-bottom-color: darken($gray-300, 4%);
-  border-radius: 3px;
+  border-radius: $border-radius;
   box-shadow: inset 0 -1px 0 darken($gray-300, 4%);
 }
diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss
index 9ba36ddf1b..f88b47e5ea 100644
--- a/src/markdown/markdown-body.scss
+++ b/src/markdown/markdown-body.scss
@@ -99,9 +99,9 @@
     color: $gray-700;
     vertical-align: middle;
     background-color: $gray-000;
-    border: solid 1px darken($gray-300, 4%);
+    border: $border-style $border-width darken($gray-300, 4%);
     border-bottom-color: $gray-400;
-    border-radius: 3px;
+    border-radius: $border-radius;
     box-shadow: inset 0 -1px 0 $gray-400;
   }
 }

From b88f8be7a4aba1389c365427bc6068311747e3dc Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Sat, 21 Sep 2019 21:20:47 +0900
Subject: [PATCH 05/13] Format comment

---
 src/labels/keyboard-shortcuts.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/labels/keyboard-shortcuts.scss b/src/labels/keyboard-shortcuts.scss
index bbec52235b..bd79795441 100644
--- a/src/labels/keyboard-shortcuts.scss
+++ b/src/labels/keyboard-shortcuts.scss
@@ -1,8 +1,10 @@
 //
 // Keyboard Shortcuts
-// Note: .markdown-body overrides these styles.
+// Note: `kbd` gets overridden in markdown-body.scss
 //
+
 // stylelint-disable selector-max-type
+
 kbd {
   display: inline-block;
   padding: 3px 5px;

From f5cfd0761d7bc4449d7d2d05477760c00eac08a7 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 26 Sep 2019 10:14:01 +0900
Subject: [PATCH 06/13] Rename

---
 src/labels/index.scss                            | 2 +-
 src/labels/{keyboard-shortcuts.scss => kbd.scss} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/labels/{keyboard-shortcuts.scss => kbd.scss} (100%)

diff --git a/src/labels/index.scss b/src/labels/index.scss
index 1c358f6693..57c1e18b03 100644
--- a/src/labels/index.scss
+++ b/src/labels/index.scss
@@ -2,4 +2,4 @@
 @import "./labels.scss";
 @import "./states.scss";
 @import "./counters.scss";
-@import "./keyboard-shortcuts.scss";
+@import "./kbd.scss";
diff --git a/src/labels/keyboard-shortcuts.scss b/src/labels/kbd.scss
similarity index 100%
rename from src/labels/keyboard-shortcuts.scss
rename to src/labels/kbd.scss

From 67be5b05a6a953c57753046399932faa6f36f5c4 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 26 Sep 2019 15:54:03 +0900
Subject: [PATCH 07/13] Move kbd styles to base.scss

---
 docs/content/components/labels.md | 20 --------------------
 src/base/base.scss                | 16 ++++++++++++++++
 src/labels/kbd.scss               | 20 --------------------
 3 files changed, 16 insertions(+), 40 deletions(-)
 delete mode 100644 src/labels/kbd.scss

diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md
index f6b49073ca..a832ee287c 100644
--- a/docs/content/components/labels.md
+++ b/docs/content/components/labels.md
@@ -135,23 +135,3 @@ Counters can also be used in `Box` headers to indicate the number of items in a
   </ul>
 </div>
 ```
-
-## Keyboard Shortcuts
-
-Wrap keybard shortcuts with `<kbd>` elements. No CSS classes are needed. It will make the shortcuts look like mini keybard keys. If multiple keys need to be pressed at the same time, wrap them in a single `<kbd>`. For example `<kbd>⌘ shift p</kbd>`. If multiple keys don't need to be pressed at the same time, use a `<kbd>` for each key. For example `<kbd>g</kbd> <kbd>d</kbd>`.
-
-
-```html live
-<p>
-  Focus search bar <kbd>s</kbd> or <kbd>/</kbd>
-</p>
-<p>
-  Preview comment <kbd>⌘ shift p</kbd>
-</p>
-<p>
-  Go to dashboard <kbd>g</kbd> <kbd>d</kbd>
-</p>
-<p>
-  Show keyboard shortcuts <kbd>?</kbd>
-</p>
-```
diff --git a/src/base/base.scss b/src/base/base.scss
index b6598334fc..6dd7ecc326 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -48,6 +48,22 @@ hr,
   @include clearfix();
 }
 
+// Keyboard shortcuts
+
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px $mono-font;
+  line-height: 10px;
+  color: $gray-700;
+  vertical-align: middle;
+  background-color: $bg-gray-light;
+  border: $border-style $border-width $gray-300;
+  border-bottom-color: darken($gray-300, 4%);
+  border-radius: $border-radius;
+  box-shadow: inset 0 -1px 0 darken($gray-300, 4%);
+}
+
 //
 // Remove most spacing between table cells.
 //
diff --git a/src/labels/kbd.scss b/src/labels/kbd.scss
deleted file mode 100644
index bd79795441..0000000000
--- a/src/labels/kbd.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-//
-// Keyboard Shortcuts
-// Note: `kbd` gets overridden in markdown-body.scss
-//
-
-// stylelint-disable selector-max-type
-
-kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  font: 11px $mono-font;
-  line-height: 10px;
-  color: $gray-700;
-  vertical-align: middle;
-  background-color: $bg-gray-light;
-  border: $border-style $border-width $gray-300;
-  border-bottom-color: darken($gray-300, 4%);
-  border-radius: $border-radius;
-  box-shadow: inset 0 -1px 0 darken($gray-300, 4%);
-}

From 821ff89f0f07925f337ad387f16794cd22e30500 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 26 Sep 2019 15:55:24 +0900
Subject: [PATCH 08/13] Remove import

---
 src/labels/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/labels/index.scss b/src/labels/index.scss
index 57c1e18b03..a86ded9b52 100644
--- a/src/labels/index.scss
+++ b/src/labels/index.scss
@@ -2,4 +2,3 @@
 @import "./labels.scss";
 @import "./states.scss";
 @import "./counters.scss";
-@import "./kbd.scss";

From 34141172eeee4ae1fd1be23e91b2bcddfcff6ff1 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Tue, 1 Oct 2019 10:14:04 +0900
Subject: [PATCH 09/13] Apply suggestions from code review

Co-Authored-By: Shawn Allen <shawn.allen@github.com>
---
 src/base/base.scss              | 8 ++++----
 src/markdown/markdown-body.scss | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 6dd7ecc326..4cabdb715a 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -52,16 +52,16 @@ hr,
 
 kbd {
   display: inline-block;
-  padding: 3px 5px;
+  padding: ($spacer-2 - 1) ($spacer-2 + 1);
   font: 11px $mono-font;
   line-height: 10px;
   color: $gray-700;
   vertical-align: middle;
   background-color: $bg-gray-light;
-  border: $border-style $border-width $gray-300;
-  border-bottom-color: darken($gray-300, 4%);
+  border: $border-style $border-width $border-gray-dark;
+  border-bottom-color: $border-gray-dark;
   border-radius: $border-radius;
-  box-shadow: inset 0 -1px 0 darken($gray-300, 4%);
+  box-shadow: inset 0 -1px 0 $border-gray-dark;
 }
 
 //
diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss
index f88b47e5ea..7ff2e5f160 100644
--- a/src/markdown/markdown-body.scss
+++ b/src/markdown/markdown-body.scss
@@ -99,7 +99,7 @@
     color: $gray-700;
     vertical-align: middle;
     background-color: $gray-000;
-    border: $border-style $border-width darken($gray-300, 4%);
+    border: $border-style $border-width $border-gray-dark;
     border-bottom-color: $gray-400;
     border-radius: $border-radius;
     box-shadow: inset 0 -1px 0 $gray-400;

From f545c73ced0f56fbe030931502b499ab25b63606 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Tue, 1 Oct 2019 10:43:15 +0900
Subject: [PATCH 10/13] Use $spacer-1

$spacer-2 is a bit too much
---
 src/base/base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/base/base.scss b/src/base/base.scss
index 4cabdb715a..1557b1e830 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -52,7 +52,7 @@ hr,
 
 kbd {
   display: inline-block;
-  padding: ($spacer-2 - 1) ($spacer-2 + 1);
+  padding: ($spacer-1 - 1) ($spacer-1 + 1);
   font: 11px $mono-font;
   line-height: 10px;
   color: $gray-700;

From 8d2952f661bc3f2da99807f84227f50764bdcedb Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Tue, 1 Oct 2019 10:52:11 +0900
Subject: [PATCH 11/13] Update markdown kbd with base kbd

---
 src/markdown/markdown-body.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss
index 7ff2e5f160..37a3ee0c18 100644
--- a/src/markdown/markdown-body.scss
+++ b/src/markdown/markdown-body.scss
@@ -93,15 +93,15 @@
 
   kbd {
     display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
+    padding: ($spacer-1 - 1) ($spacer-1 + 1);
+    font: 11px $mono-font;
     line-height: 10px;
     color: $gray-700;
     vertical-align: middle;
-    background-color: $gray-000;
+    background-color: $bg-gray-light;
     border: $border-style $border-width $border-gray-dark;
-    border-bottom-color: $gray-400;
+    border-bottom-color: $border-gray-dark;
     border-radius: $border-radius;
-    box-shadow: inset 0 -1px 0 $gray-400;
+    box-shadow: inset 0 -1px 0 $border-gray-dark;
   }
 }

From 9fa53c02d9b23861618591474f0475c4706b3a63 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Wed, 2 Oct 2019 10:50:16 +0900
Subject: [PATCH 12/13] Import kbd form /base

---
 src/base/base.scss              | 16 ----------------
 src/base/index.scss             |  1 +
 src/base/kbd.scss               | 15 +++++++++++++++
 src/markdown/markdown-body.scss | 16 ++--------------
 4 files changed, 18 insertions(+), 30 deletions(-)
 create mode 100644 src/base/kbd.scss

diff --git a/src/base/base.scss b/src/base/base.scss
index 1557b1e830..b6598334fc 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -48,22 +48,6 @@ hr,
   @include clearfix();
 }
 
-// Keyboard shortcuts
-
-kbd {
-  display: inline-block;
-  padding: ($spacer-1 - 1) ($spacer-1 + 1);
-  font: 11px $mono-font;
-  line-height: 10px;
-  color: $gray-700;
-  vertical-align: middle;
-  background-color: $bg-gray-light;
-  border: $border-style $border-width $border-gray-dark;
-  border-bottom-color: $border-gray-dark;
-  border-radius: $border-radius;
-  box-shadow: inset 0 -1px 0 $border-gray-dark;
-}
-
 //
 // Remove most spacing between table cells.
 //
diff --git a/src/base/index.scss b/src/base/index.scss
index e4563c7566..2c7f8b99b2 100644
--- a/src/base/index.scss
+++ b/src/base/index.scss
@@ -2,4 +2,5 @@
 
 @import "./normalize.scss";
 @import "./base.scss";
+@import "./kbd.scss";
 @import "./typography-base.scss";
diff --git a/src/base/kbd.scss b/src/base/kbd.scss
new file mode 100644
index 0000000000..cb43880565
--- /dev/null
+++ b/src/base/kbd.scss
@@ -0,0 +1,15 @@
+// Keyboard shortcuts
+
+kbd {
+  display: inline-block;
+  padding: ($spacer-1 - 1) ($spacer-1 + 1);
+  font: 11px $mono-font;
+  line-height: 10px;
+  color: $gray-700;
+  vertical-align: middle;
+  background-color: $bg-gray-light;
+  border: $border-style $border-width $border-gray-dark;
+  border-bottom-color: $border-gray-dark;
+  border-radius: $border-radius;
+  box-shadow: inset 0 -1px 0 $border-gray-dark;
+}
diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss
index 37a3ee0c18..7b152a7612 100644
--- a/src/markdown/markdown-body.scss
+++ b/src/markdown/markdown-body.scss
@@ -10,6 +10,8 @@
   line-height: $body-line-height;
   word-wrap: break-word;
 
+  @import "../base/kbd.scss"; // adds support for keyboard shortcuts
+
   // Clearfix on the markdown body
   &::before {
     display: table;
@@ -90,18 +92,4 @@
       margin-bottom: 0;
     }
   }
-
-  kbd {
-    display: inline-block;
-    padding: ($spacer-1 - 1) ($spacer-1 + 1);
-    font: 11px $mono-font;
-    line-height: 10px;
-    color: $gray-700;
-    vertical-align: middle;
-    background-color: $bg-gray-light;
-    border: $border-style $border-width $border-gray-dark;
-    border-bottom-color: $border-gray-dark;
-    border-radius: $border-radius;
-    box-shadow: inset 0 -1px 0 $border-gray-dark;
-  }
 }

From 4c14e4051307576f68cb7fa374b186e5341781b5 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Wed, 2 Oct 2019 11:01:13 +0900
Subject: [PATCH 13/13] Fix linter

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

diff --git a/src/base/kbd.scss b/src/base/kbd.scss
index cb43880565..ac95d60936 100644
--- a/src/base/kbd.scss
+++ b/src/base/kbd.scss
@@ -1,4 +1,5 @@
 // Keyboard shortcuts
+// stylelint-disable selector-max-type
 
 kbd {
   display: inline-block;