palantir · giladgray · May 8, 2018 · May 2, 2018 · May 7, 2018 · May 8, 2018
diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss
@@ -155,6 +155,10 @@ Styleguide running-text
     @extend %code-block;
   }
 
+  kbd {
+    @extend %keyboard;
+  }
+
   ul,
   ol {
     @extend %list;
@@ -281,6 +285,37 @@ Styleguide preformatted
   @extend %code-block;
 }
 
+%keyboard {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $pt-border-radius;
+  box-shadow: $pt-elevation-shadow-1;
+  background: $white;
+  min-width: $pt-button-height-small;
+  height: $pt-button-height-small;
+  padding: $pt-border-radius ($pt-border-radius * 2);
+  vertical-align: middle;
+  line-height: $pt-button-height-small;
+  color: $pt-text-color-muted;
+  font-family: inherit;
+  font-size: $pt-font-size-small;
+
+  #{$icon-classes} {
+    margin-right: $pt-grid-size / 2;
+  }
+
+  .#{$ns}-dark & {
+    box-shadow: $pt-dark-elevation-shadow-1;
+    background: $dark-gray5;
+    color: $pt-dark-text-color-muted;
+  }
+}
+
+.#{$ns}-key {
+  @extend %keyboard;
+}
+
 /*
 Block quotes
 

diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
@@ -20,7 +20,7 @@ import { Icon, IconName } from "../icon/icon";
 
 export interface IAlertProps extends IProps {
     /**
-     * Whether pressing <kbd class="pt-key">escape</kbd> when focused on the Alert should cancel the alert.
+     * Whether pressing <kbd>escape</kbd> when focused on the Alert should cancel the alert.
      * If this prop is enabled, then either `onCancel` or `onClose` must also be defined.
      * @default false
      */

diff --git a/packages/core/src/components/button/button.md b/packages/core/src/components/button/button.md
@@ -12,7 +12,7 @@ Use the `@ns-button` class to access button styles. You should implement buttons
 * Add the attribute `tabindex="0"` to make `<a>` tags focusable. `<button>` elements are
   focusable by default.
 * For buttons implemented with `<a>` tags, add `tabindex="-1"` to disabled buttons to prevent the
-  user from focusing them by pressing <kbd class="@ns-key">tab</kbd> on the keyboard.
+  user from focusing them by pressing <kbd>tab</kbd> on the keyboard.
 * Note that `<a>` tags do not respond to the `:disabled` attribute; use `.@ns-disabled` instead.
 
 @css button

diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx
@@ -73,7 +73,7 @@ export interface INumericInputProps extends IIntentProps, IProps {
     placeholder?: string;
 
     /**
-     * The increment between successive values when <kbd class="pt-key">shift</kbd> is held.
+     * The increment between successive values when <kbd>shift</kbd> is held.
      * Pass explicit `null` value to disable this interaction.
      * @default 10
      */
@@ -86,7 +86,7 @@ export interface INumericInputProps extends IIntentProps, IProps {
     min?: number;
 
     /**
-     * The increment between successive values when <kbd class="pt-key">alt</kbd> is held.
+     * The increment between successive values when <kbd>alt</kbd> is held.
      * Pass explicit `null` value to disable this interaction.
      * @default 0.1
      */

diff --git a/packages/core/src/components/hotkeys/_hotkeys.scss b/packages/core/src/components/hotkeys/_hotkeys.scss
@@ -3,36 +3,6 @@
 @import "../../common/variables";
 @import "../../common/mixins";
 
-$kbd-key-size: 25px !default;
-$modifier-key-padding: 3px 8px 3px 6px !default;
-
-.#{$ns}-key {
-  display: inline-block;
-  border-radius: $pt-border-radius - 1;
-  box-shadow: $pt-elevation-shadow-2;
-  background: $white;
-  min-width: $kbd-key-size;
-  height: $kbd-key-size;
-  padding: 3px 5px;
-  vertical-align: middle;
-  text-align: center;
-  line-height: $pt-grid-size * 2;
-  color: $pt-text-color-muted;
-  font-family: inherit;
-  font-size: $pt-font-size-small;
-
-  &.#{$ns}-modifier-key {
-    padding: $modifier-key-padding;
-  }
-
-  .#{$ns}-dark & {
-    box-shadow: $pt-dark-elevation-shadow-2,
-                inset 0 1px 0 rgba($white, 0.05);
-    background: $dark-gray5;
-    color: $pt-dark-text-color-muted;
-  }
-}
-
 .#{$ns}-key-combo .#{$ns}-key:not(:last-child) {
   margin-right: $pt-grid-size / 2;
 }
@@ -46,10 +16,8 @@ $modifier-key-padding: 3px 8px 3px 6px !default;
     padding: 0;
   }
 
-  .#{$ns}-key-combo {
-    flex: 1 0 auto;
-    width: $pt-grid-size * 16;
-    text-align: right;
+  .#{$ns}-hotkey-label {
+    flex-grow: 1;
   }
 }
 
@@ -70,7 +38,7 @@ $modifier-key-padding: 3px 8px 3px 6px !default;
 
 .#{$ns}-hotkey {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
   margin-right: 0;
   margin-left: 0;

diff --git a/packages/core/src/components/tag-input/tag-input.md b/packages/core/src/components/tag-input/tag-input.md
@@ -4,9 +4,9 @@ Tag inputs render [`Tag`](#core/components/tag)s inside an input, followed by an
 
 @reactExample TagInputExample
 
-**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd class="@ns-key">enter</kbd> will **add new items** by invoking callbacks. If `addOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
+**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd>enter</kbd> will **add new items** by invoking callbacks. If `addOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
 
-**Tags can be removed** by clicking their <span class="@ns-icon-standard @ns-icon-cross"></span> buttons, or by pressing <kbd class="@ns-key">backspace</kbd> repeatedly. Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning of the text input for these interactions.
+**Tags can be removed** by clicking their <span class="@ns-icon-standard @ns-icon-cross"></span> buttons, or by pressing <kbd>backspace</kbd> repeatedly. Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning of the text input for these interactions.
 
 **`Tag` appearance can be customized** with `tagProps`: supply an object to apply the same props to every tag, or supply a callback to apply dynamic props per tag. Tag `values` must be an array of strings so you may need a transformation step between your state and these props.
 

diff --git a/packages/core/src/docs/accessibility.md b/packages/core/src/docs/accessibility.md
@@ -12,7 +12,7 @@ any time.
 
 Blueprint includes a utility that manages the appearance of focus styles. When enabled, focus styles
 will be hidden while the user interacts using the mouse and will appear when the
-<kbd class="@ns-key">tab</kbd> key is pressed to begin keyboard navigation. Try this out for yourself
+<kbd>tab</kbd> key is pressed to begin keyboard navigation. Try this out for yourself
 below.
 
 **You must explictly enable this feature in your app (and you probably want to):**

diff --git a/packages/core/src/docs/typography.md b/packages/core/src/docs/typography.md
@@ -30,7 +30,7 @@ For longer blocks of running text, such as articles or documents, see [running t
 Longform text, such as rendered Markdown documents, benefit from increased spacing and support for unclassed textual elements.
 Apply `.@ns-running-text` to the parent element to apply the following styles to all children:
 
-- `<h*>`, `<ul>`, `<ol>`, `<blockquote>`, `<code>`, `<pre>` do not require additional CSS classes for styles. This is great for rendered Markdown documents.
+- `<h*>`, `<ul>`, `<ol>`, `<blockquote>`, `<code>`, `<pre>`, `<kbd>` tags do not require additional CSS classes for styles. This is great for rendered Markdown documents.
 - `<h*>` tag margins are adjusted to provide clear separation between sections in a document.
 - `<ul>` and `<ol>` tags receive [`.@ns-list`](#core/typography.lists) styles for legibility.
 

diff --git a/packages/docs-theme/src/styles/_props.scss b/packages/docs-theme/src/styles/_props.scss
@@ -2,12 +2,14 @@
 // Licensed under the terms of the LICENSE file distributed with this project.
 
 .docs-prop-details code {
-  box-shadow: none;
-  background: none;
+  // stylelint-disable declaration-no-important
+  box-shadow: none !important;
+  background: none !important;
   padding: 0;
-  color: inherit;
+  color: inherit !important;
   font-size: small;
   font-weight: 600;
+  // stylelint-enable declaration-no-important
 }
 
 .docs-prop-default {