Merge pull request #954 from primer/release-13.2.0

Release 13.2.0
2024-12-29 09:06:07 +03:00 · 2019-10-28 16:02:09 +09:00 · 2019-10-28 16:02:09 +09:00 · de91594b5f
commit de91594b5f
parent 03f5ac445d 5eacec8f0c
31 changed files with 976 additions and 151 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,27 @@
+# 13.2.0
+
+### :rocket: Enhancements
+- [#959](https://github.com/primer/css/959) More buttons
+- [#950](https://github.com/primer/css/950) Add Diffstat component
+- [#913](https://github.com/primer/css/913) Importing TimelineItem from .com and creating matching docs
+- [#953](https://github.com/primer/css/953) Add IssueLabel component
+
+### :bug: Bug fixes
+- [#945](https://github.com/primer/css/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected`
+
+### :memo: Documentation
+- [#939](https://github.com/primer/css/939) Fix `Box--overlay` example
+- [#943](https://github.com/primer/css/943) Fix broken links to typography utilities
+
+### :house: Internal
+- [#946](https://github.com/primer/css/946) Add `TODO@version` stylelint rule (local)
+
+### Committers
+- [@MohamedElidrissi](https://github.com/MohamedElidrissi)
+- [@jonrohan](https://github.com/jonrohan)
+- [@shawnbot](https://github.com/shawnbot)
+- [@simurai](https://github.com/simurai)
+
 # 13.1.0

 ### :rocket: Enhancement
--- a/DEVELOP.md
+++ b/DEVELOP.md
@ -36,18 +36,16 @@ The typical Primer workflow looks something like this:
 Run `npm install` to install the npm dependencies.

 ## Docs site
-The Primer CSS docs are built with React using [Primer Components](https://primer.style/components) and automatically deployed on every push to this repo with [Now]. You can run the server locally with:
+The Primer CSS docs are built with React using [Doctocat](https://primer.style/doctocat) and automatically deployed on every push to this repo with [Now]. You can run the server locally with:

 ```sh
 npm start
 ```

-Then visit http://localhost:3000/css to view the site.
+Then visit http://localhost:8000 to view the site.

-:rotating_light: **Warning:** Next.js has a [long-running issue](https://github.com/zeit/next.js/issues/1189) with trailing slashes in URLs. Avoid visiting `http://localhost:3000/` if possible, as this may cause your development server to fail in less-than-graceful ways.
-
-### The pages directory
-The [pages directory](./pages/) contains all of the documentation files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
+### The docs directory
+The [docs directory](./docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.


 ### URL tests
--- a/docs/content/components/box-overlay.md
+++ b/docs/content/components/box-overlay.md
@ -12,15 +12,15 @@ Use the `Box--overlay` with the `<details>` and [`<details-dialog>`](https://git

 Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide.

-**Note:** `position: fixed` has been disabled in this example
+```html live

-```erb
 <details class="details-reset details-overlay details-overlay-dark">
  <summary class="btn" aria-haspopup="dialog">Open dialog</summary>
  <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast">
    <div class="Box-header">
      <button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
-        <%= octicon "x" %>
+        <!-- <%= octicon "x" %> -->
+        <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
      </button>
      <h3 class="Box-title">Box title</h3>
    </div>
@ -50,6 +50,10 @@ Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Bo
    </div>
  </details-dialog>
 </details>
+
+<!-- Temporary overrides (don't use in production) -->
+<style> .frame-example { min-height: 500px; } </style>
+<link href="https://unpkg.com/@github/details-dialog-element/index.css" rel="stylesheet" />
 ```

 In github.com there is a shared dialog partial. You will only have to pass in the modal content:
--- a/docs/content/components/buttons.md
+++ b/docs/content/components/buttons.md
@ -15,13 +15,15 @@ Use the standard—yet classy—`.btn` for form actions and primary page actions
 When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.

 ```html live
-<button class="btn" type="button">Button button</button> <a class="btn" href="#url" role="button">Link button</a>
+<button class="btn mr-2" type="button">Button button</button>
+<a class="btn" href="#url" role="button">Link button</a>
 ```

 You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.

 ```html live
-<button class="btn" type="button">Button</button> <button class="btn btn-sm" type="button">Small button</button>
+<button class="btn mr-2" type="button">Button</button>
+<button class="btn btn-sm" type="button">Small button</button>
 ```

 ## Primary button
@ -29,7 +31,7 @@ You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.
 Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.

 ```html live
-<button class="btn btn-primary" type="button">Primary button</button>
+<button class="btn btn-primary mr-2" type="button">Primary button</button>
 <button class="btn btn-sm btn-primary" type="button">Small primary button</button>
 ```

@ -38,7 +40,7 @@ Primary buttons are green and are used to indicate the _primary_ action on a pag
 Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.

 ```html live
-<button class="btn btn-danger" type="button">Danger button</button>
+<button class="btn btn-danger mr-2" type="button">Danger button</button>
 <button class="btn btn-sm btn-danger" type="button">Small danger button</button>
 ```

@ -47,7 +49,7 @@ Danger buttons are red. They help reiterate that the intended action is importan
 Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.

 ```html live
-<button class="btn btn-outline" type="button">Outline button</button>
+<button class="btn btn-outline mr-2" type="button">Outline button</button>
 <button class="btn btn-sm btn-outline" type="button">Outline button</button>
 ```

@ -58,19 +60,17 @@ Use `.btn-large` to increase the padding and border radius of a button. This is
 [Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.

 ```html live
-<p>
-  <a class="btn btn-large" href="#url" role="button">Large link button</a>
-  <button class="btn btn-large" type="button">Large button button</button>
-</p>
+<button class="btn btn-large mr-2" type="button">Large button</button>
+<a class="btn btn-large" href="#url" role="button">Large link button</a>
 ```

 Use `.btn-large` with a type scale utility to transform the text to a bigger size.

 ```html live
-<p class="f3">
+<div class="f3">
+  <button class="btn btn-large btn-outline-blue mr-2" type="button">Large button button</button>
  <a class="btn btn-large" href="#url" role="button">Large link button</a>
-  <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
-</p>
+</div>
 ```

 ## Disabled state
@ -78,24 +78,24 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
 Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.

 ```html live
-<button class="btn" type="button" disabled>Disabled button</button>
+<button class="btn mr-2" type="button" disabled>Disabled button</button>
 <a class="btn disabled" href="#url" role="button">Disabled button</a>
 ```

 Similar styles are applied to primary, danger, and outline buttons:

 ```html live
-<button class="btn btn-primary" type="button" disabled>Disabled button</button>
+<button class="btn btn-primary mr-2" type="button" disabled>Disabled button</button>
 <a class="btn btn-primary disabled" href="#url" role="button">Disabled button</a>
 ```

 ```html live
-<button class="btn btn-danger" type="button" disabled>Disabled button</button>
+<button class="btn btn-danger mr-2" type="button" disabled>Disabled button</button>
 <a class="btn btn-danger disabled" href="#url" role="button">Disabled button</a>
 ```

 ```html live
-<button class="btn btn-outline" type="button" disabled>Disabled button</button>
+<button class="btn btn-outline mr-2" type="button" disabled>Disabled button</button>
 <a class="btn btn-outline disabled" href="#url" role="button">Disabled button</a>
 ```

@ -104,8 +104,8 @@ Similar styles are applied to primary, danger, and outline buttons:
 Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.

 ```html live
-<p><button class="btn btn-block" type="button">Block button</button></p>
-<p><button class="btn btn-sm btn-block" type="button">Small block button</button></p>
+<button class="btn btn-block mb-2" type="button">Block button</button>
+<button class="btn btn-sm btn-block" type="button">Small block button</button>
 ```

 ## Link button
@ -115,7 +115,55 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
 **The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.**

 ```html live
-<p><button class="btn-link" type="button">Link button</button></p>
+<button class="btn-link" type="button">Link button</button>
+```
+
+## Invisible button
+
+When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms.
+
+```html live
+<button class="btn btn-invisible" type="button">Cancel</button>
+<button class="btn" type="button">Submit</button>
+```
+
+## Octicon button
+
+Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
+
+```html live
+<button class="btn-octicon" type="button" aria-label="Desktop icon">
+  <!-- <%= octicon "device-desktop" %> -->
+  <svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
+</button>
+
+<button class="btn-octicon" type="button" aria-label="Pencil icon">
+  <!-- <%= octicon "pencil" %> -->
+  <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
+</button>
+
+<button class="btn-octicon btn-octicon-danger" type="button" aria-label="Trashcan icon">
+  <!-- <%= octicon "trashcan" %> -->
+  <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
+</button>
+
+<button class="btn-octicon" type="button" aria-label="Trashcan icon">
+  <!-- <%= octicon "kebab-horizontal" %> -->
+  <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
+</button>
+```
+
+
+
+## Close button
+
+When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
+
+```html live
+<button class="close-button" type="button">
+  <!-- <%= octicon "x" %> -->
+  <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" /></svg>
+</button>
 ```

 ## Button with counts
@ -138,24 +186,20 @@ You can easily append a count to a **small button**. Add the `.with-count` class
 You can also use the [counter](./labels#counters) component within buttons:

 ```html live
-<button class="btn" type="button">
-  Button
-  <span class="Counter">12</span>
+<button class="btn mr-2" type="button">
+  Button <span class="Counter">12</span>
 </button>

-<button class="btn btn-primary" type="button">
-  Button
-  <span class="Counter">12</span>
+<button class="btn btn-primary mr-2" type="button">
+  Button <span class="Counter">12</span>
 </button>

-<button class="btn btn-danger" type="button">
-  Button
-  <span class="Counter">12</span>
+<button class="btn btn-danger mr-2" type="button">
+  Button <span class="Counter">12</span>
 </button>

 <button class="btn btn-outline" type="button">
-  Button
-  <span class="Counter">12</span>
+  Button <span class="Counter">12</span>
 </button>
 ```

@ -207,21 +251,3 @@ Use `.hidden-text-expander` to indicate and toggle hidden text.
 ```

 You can also make the expander appear inline by adding `.inline`.
-
-## Using button styles with the details summary element
-
-You can add `.btn` and `.btn-*` classes to any
-[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
-element so that it gains the appearance of a button, and
-selected/active styles when the parent
-[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
-element is open.
-
-```html live
-<details>
-  <summary class="btn btn-block btn-primary">Toggle the content</summary>
-  <p class="mt-2">
-    This content will be toggled.
-  </p>
-</details>
-```
--- a/docs/content/components/labels.md
+++ b/docs/content/components/labels.md
@ -62,6 +62,25 @@ Use `Label--outline-green` in combination with `Label--outline` to communicate a
 <span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
 ```

+## Issue Labels
+
+Issue Labels are used for adding labels to issues and pull requests. They also come with emoji support.
+
+```html live
+<span class="IssueLabel bg-blue text-white mr-1" title="Label: good first issue">good first issue</span>
+<span class="IssueLabel bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
+<span class="IssueLabel bg-green text-white" title="Label: bug">help wanted</span>
+```
+
+If an Issue Label needs to be bigger, add the `.IssueLabel--big` modifier.
+
+```html live
+<span class="IssueLabel IssueLabel--big bg-blue text-white mr-1" title="Label: good first issue">good first issue</span>
+<span class="IssueLabel IssueLabel--big bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
+<span class="IssueLabel IssueLabel--big bg-green text-white" title="Label: bug">help wanted</span>
+```
+
+
 ## States

 Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
@ -155,3 +174,26 @@ Counters can also be used in `Box` headers to indicate the number of items in a
  </ul>
 </div>
 ```
+
+## Diffstat
+
+Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red.
+
+```html live
+<span class="diffstat tooltipped tooltipped-e" aria-label="6 changes: 3 additions &amp; 3 deletions">
+  6
+  <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
+</span>
+```
+
+Use the `text-green` and `text-red` utilities to add addtitional information about the size of the diff.
+
+```html live
+<span class="diffstat">
+    <span class="text-green">+7</span>
+    <span class="text-red">−2</span>
+    <span class="tooltipped tooltipped-e" aria-label="9 lines changed">
+      <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
+    </span>
+</span>
+```
--- a/docs/content/components/timeline.md
+++ b/docs/content/components/timeline.md
@ -0,0 +1,189 @@
+---
+title: Timeline
+path: components/timeline
+status: Experimental
+status_issue: 'https://github.com/github/design-systems/issues/101'
+source: ''
+bundle: timeline
+---
+
+The `TimelineItem` component is used to display items on a vertical timeline, connected by `TimelineItem-badge` elements.
+
+```html live
+<div class="TimelineItem">
+  <div class="TimelineItem-badge">
+    <!-- octicon("flame") -->
+    <svg class="octicon octicon-flame" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
+  </div>
+
+  <div class="TimelineItem-body">
+    <a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one
+    <a href="#" class="text-bold link-gray-dark">hot potato</a>
+    <a href="#" class="link-gray">Just now</a>
+  </div>
+</div>
+```
+
+## TimelineItem-badge
+
+The default TimelineItem-badge color is dark text on a light grey background.
+
+```html live
+<!-- Default TimelineItem Badge -->
+<div class="TimelineItem">
+  <div class="TimelineItem-badge">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    Default badge color
+  </div>
+</div>
+```
+
+### Adding color to TimelineItem-badge
+
+To have color variants, use the [color utilities]() on the badge. Be cautious with color choices. We typically use them in the timeline to give meaning to the event in context of the timeline.
+
+```html live
+<!-- Colorful TimelineItem Badge -->
+<div class="TimelineItem">
+  <div class="TimelineItem-badge bg-red text-white">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    Red background used when closed events occur
+  </div>
+</div>
+<div class="TimelineItem">
+  <div class="TimelineItem-badge bg-green text-white">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    Green background when opened or passed events occur
+  </div>
+</div>
+<div class="TimelineItem">
+  <div class="TimelineItem-badge bg-purple text-white">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    Purple background used when pull requests are merged
+  </div>
+</div>
+<div class="TimelineItem">
+  <div class="TimelineItem-badge bg-blue text-white">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    Blue background to indicate new events below
+  </div>
+</div>
+```
+
+## TimelineItem--condensed
+
+TimelineItem has a condensed variant that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits.
+
+```html live
+<div class="TimelineItem TimelineItem--condensed">
+  <div class="TimelineItem-badge">
+    <svg class="octicon octicon-git-commit" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
+      <path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    This is the message of a condensed TimelineItem
+  </div>
+</div>
+<div class="TimelineItem TimelineItem--condensed">
+  <div class="TimelineItem-badge">
+    <svg class="octicon octicon-git-commit" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
+      <path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    This is the message of a condensed TimelineItem
+  </div>
+</div>
+```
+
+## TimelineItem-avatar
+
+Sometimes you want to give ownership to an event by displaying an [Avatar]() of the author. To do this, you'll need to wrap the TimelineItem in a `<div>` and give it space for the avatar. `ml-6 pl-3` This is `40px`, the size of the image, and `16px` space for the gutter.
+
+```html live
+<div class="ml-6 pl-3">
+  <div class="TimelineItem">
+    <div class="TimelineItem-avatar">
+      <img class="avatar" height="40" width="40" alt="@octocat"
+        src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" />
+    </div>
+
+    <div class="TimelineItem-badge">
+      <!-- octicon("flame") -->
+      <svg class="octicon octicon-flame" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
+    </div>
+
+    <div class="TimelineItem-body">
+      <a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one
+      <a href="#" class="text-bold link-gray-dark">hot potato</a>
+      <a href="#" class="link-gray">Just now</a>
+    </div>
+  </div>
+</div>
+```
+
+## TimelineItem-break
+
+To create a visual break in the timeline, use `TimelineItem-break`. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs.
+
+```html live
+<div class="TimelineItem">
+  <div class="TimelineItem-badge bg-red text-white">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    Red background used when closed events occur
+  </div>
+</div>
+<div class="TimelineItem-break ml-0"></div>
+<div class="TimelineItem">
+  <div class="TimelineItem-badge bg-green text-white">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
+    </svg>
+  </div>
+  <div class="TimelineItem-body">
+    Green background when opened or passed events occur
+  </div>
+</div>
+```
+
+## Target TimelineItem
+
+```html live
+<div class="TimelineItem" id="1">
+  <a href="#1" class="TimelineItem-badge">
+    <!-- octicon("flame") -->
+    <svg class="octicon octicon-flame" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
+  </a>
+
+  <div class="TimelineItem-body">
+    <a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one
+    <a href="#" class="text-bold link-gray-dark">hot potato</a>
+    <a href="#1" class="link-gray">Just now</a>
+  </div>
+</div>
+```
--- a/docs/content/support/typography.md
+++ b/docs/content/support/typography.md
@ -24,7 +24,7 @@ Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./breakpo
 | 5     | 14px              | 14px               | 17.5             | 21              |
 | 6     | 12px              | 12px               | 15               | 18              |

-The typography scale is used to create [typography utilities](/css/utilities/typography).
+The typography scale is used to create [typography utilities](/utilities/typography).

 ## Typography variables

@ -67,7 +67,7 @@ $lh-default: 1.5 !default;

 ## Typography Mixins

-Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/css/utilities/typography#heading-utilities). which requires no additional CSS.
+Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/utilities/typography#heading-utilities). which requires no additional CSS.

 Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:

--- a/docs/content/utilities/details.md
+++ b/docs/content/utilities/details.md
@ -8,8 +8,6 @@ bundle: utilities

 Details classes are created to enhance the native behaviors of `<details>`.

- 
-
 ## Fullscreen click area

 Use `.details-overlay` to expand the click area of `<summary>` to cover the full screen, so user can click anywhere on a page to close `<details>`.
@ -17,7 +15,7 @@ Use `.details-overlay` to expand the click area of `<summary>` to cover the full
 ```html live
 <details class="details-overlay">
  <summary class="btn">More</summary>
-  <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
+  <div class="border p-3 mt-2">Hidden text</div>
 </details>
 ```

@ -28,6 +26,38 @@ Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
 ```html live
 <details class="details-overlay details-overlay-dark">
  <summary class="btn">More</summary>
-  <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
+  <div class="border p-3 mt-2">Hidden text</div>
+</details>
+```
+
+## Custom caret
+
+Use `.details-reset` to remove the default caret (that little triangle on the left). You then can add the `.dropdown-caret` on the right of the text.
+
+```html live
+<details class="details-reset">
+  <summary class="btn">More <span class="dropdown-caret"></summary>
+  <div class="border p-3 mt-2">Hidden text</div>
+</details>
+```
+
+## Using button styles with the details summary element
+
+You can add `.btn` and `.btn-*` classes to any
+[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
+element so that it gains the appearance of a button, and
+selected/active styles when the parent
+[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
+element is open.
+
+```html live
+<details>
+  <summary class="btn btn-primary">More</summary>
+  <div class="border p-3 mt-2">Hidden text</div>
+</details>
+
+<details class="details-reset mt-3">
+  <summary class="btn-link">More <span class="dropdown-caret"></summary>
+  <div class="border p-3 mt-2">Hidden text</div>
 </details>
 ```
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@ -4050,9 +4050,9 @@
      "integrity": "sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A=="
    },
    "chroma-js": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.4.tgz",
-      "integrity": "sha512-gk71qOrSdBTLbsd0DIUO3QjZL8tTvMwpG1EoXYScy7rI4rcO4EyYH6zGuvCgUDumKumqg0pt6Ua+vWnMJsTYhw=="
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.6.tgz",
+      "integrity": "sha512-IiiClbBRkRwuXNl6impq5ssEhUGpmWvc5zzImZbDUWLWcFbj6ZbtsdZEx6sIXMKes7azgYaUpnmsY1T8BL6PqQ=="
    },
    "chrome-trace-event": {
      "version": "1.0.2",
--- a/docs/package.json
+++ b/docs/package.json
@ -18,7 +18,7 @@
    "@primer/octicons-react": "^9.1.1",
    "@svgr/webpack": "^4.3.2",
    "autoprefixer": "^9.6.1",
-    "chroma-js": "^2.0.4",
+    "chroma-js": "^2.0.6",
    "gatsby": "^2.10.4",
    "gatsby-plugin-google-analytics": "^2.1.7",
    "gatsby-plugin-sass": "^2.1.0",
--- a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
@ -7,7 +7,7 @@ function LivePreviewWrapper({children}) {
    <Frame>
      <link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
      <style>{primerStyles}</style>
-      <div className="p-3">{children}</div>
+      <div className="frame-example p-3">{children}</div>
    </Frame>
  )
 }
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@ -109,6 +109,8 @@
      url: /components/select-menu-deprecated
    - title: Subhead
      url: /components/subhead
+    - title: Timeline
+      url: /components/timeline
    - title: Toasts
      url: /components/toasts
    - title: Tooltips
--- a/lib/stylelint-todo.js
+++ b/lib/stylelint-todo.js
@ -0,0 +1,38 @@
+const semver = require('semver')
+const stylelint = require('stylelint')
+
+const ruleName = 'primer-css/TODO'
+const pattern = /\bTODO@([^:]+):\s+(.+)$/
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected: message => message
+})
+
+module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
+  const {currentVersion} = options
+  if (!currentVersion) {
+    // eslint-disable-next-line no-console
+    console.warn(`No "currentVersion" supplied to ${ruleName}; bailing`)
+    return () => null
+  }
+
+  let match
+  return (root, result) => {
+    root.walkComments(node => {
+      if ((match = node.text.match(pattern))) {
+        // eslint-disable-next-line no-unused-vars
+        const [substr, todoVersion, message] = match
+        if (semver.lte(todoVersion, currentVersion)) {
+          stylelint.utils.report({
+            message: messages.rejected(
+              `Unresolved TODO comment: "${message}" (expected to be resolved in "${todoVersion}")`
+            ),
+            node,
+            result,
+            ruleName
+          })
+        }
+      }
+    })
+  }
+})
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "@primer/css",
-  "version": "13.1.0",
+  "version": "13.2.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -1566,6 +1566,14 @@
            "postcss-modules-values": "^2.0.0",
            "postcss-value-parser": "^3.3.0",
            "schema-utils": "^1.0.0"
+          },
+          "dependencies": {
+            "postcss-value-parser": {
+              "version": "3.3.1",
+              "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+              "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+              "dev": true
+            }
          }
        },
        "fs-extra": {
@ -2897,6 +2905,14 @@
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.14",
        "postcss-value-parser": "^3.3.1"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
      }
    },
    "aws-sign2": {
@ -4836,6 +4852,12 @@
            "postcss": "^6.0.1"
          }
        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -5008,6 +5030,14 @@
        "camelize": "^1.0.0",
        "css-color-keywords": "^1.0.0",
        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
      }
    },
    "css-tokenize": {
@ -11371,6 +11401,26 @@
        "htmlparser2": "^3.10.0"
      }
    },
+    "postcss-import": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
+      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.1",
+        "postcss-value-parser": "^3.2.3",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
    "postcss-jsx": {
      "version": "0.36.3",
      "resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.3.tgz",
@ -11513,6 +11563,14 @@
        "postcss": "^7.0.6",
        "postcss-selector-parser": "^6.0.0",
        "postcss-value-parser": "^3.3.1"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
      }
    },
    "postcss-modules-scope": {
@ -11650,9 +11708,9 @@
      "dev": true
    },
    "postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
+      "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
      "dev": true
    },
    "prelude-ls": {
@ -12456,6 +12514,23 @@
      "integrity": "sha512-m7KWzOTLaibqBD6iw1dRNGX07kt1gW2hjImky+nLYBR/+FFe68xJYdYgPF6sMkLYBHLApJRczIBPhP/z5y63yQ==",
      "dev": true
    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        }
+      }
+    },
    "read-pkg": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@ -14492,6 +14567,12 @@
            "uniq": "^1.0.1"
          }
        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        },
        "read-pkg": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@primer/css",
-  "version": "13.1.0",
+  "version": "13.2.0",
  "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
  "homepage": "https://primer.style/css",
  "author": "GitHub, Inc.",
@ -62,10 +62,12 @@
    "node-fetch": "2.4.0",
    "npm-run-all": "4.1.5",
    "postcss": "7.0.14",
+    "postcss-import": "^12.0.1",
    "postcss-load-config": "2.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-node-sass": "2.1.8",
    "postcss-scss": "2.0.0",
+    "postcss-value-parser": "^4.0.2",
    "prop-types": "^15.6.2",
    "semver": "5.7.1",
    "style-loader": "^0.18.2",
--- a/script/analyze-variables.js
+++ b/script/analyze-variables.js
@ -0,0 +1,120 @@
+#!/usr/bin/env node
+const postcss = require('postcss')
+const atImport = require('postcss-import')
+const syntax = require('postcss-scss')
+const valueParser = require('postcss-value-parser')
+const {readFile} = require('fs-extra')
+
+if (module.parent) {
+  module.exports = analyzeVariables
+} else {
+  const args = process.argv.slice(2)
+  const file = args.length ? args.shift() : 'src/support/index.scss'
+  analyzeVariables(file).then(data => console.log(JSON.stringify(data, null, 2)))
+}
+
+function analyzeVariables(file) {
+  const variables = {}
+
+  const processor = postcss([
+    atImport({path: 'src'}),
+    variablePlugin(variables),
+    require('postcss-node-sass')({includePaths: ['src/support/variables']})
+  ])
+
+  return readFile(file, 'utf8')
+    .then(css => processor.process(css, {from: file, map: false, syntax}))
+    .then(({root}) => {
+      root.walkRules(':root', container => {
+        container.walkDecls(decl => {
+          const {prop, value} = decl
+          const actualProp = `$${prop.replace(/^--/, '')}`
+          const entry = variables[actualProp]
+          if (last(entry.values) !== value) {
+            entry.values.push(value)
+          }
+          variables[actualProp] = Object.assign(
+            {
+              computed: value
+            },
+            entry,
+            {refs: []}
+          )
+        })
+      })
+
+      for (const [prop, entry] of Object.entries(variables)) {
+        for (const value of entry.values) {
+          if (variables[value]) {
+            variables[value].refs.push(prop)
+          }
+        }
+      }
+
+      // sort it alphabetically by key
+      return sortObject(variables, ([ak], [bk]) => ak.localeCompare(bk))
+    })
+}
+
+function variablePlugin(variables) {
+  return postcss.plugin('analyze-variables', (options = {}) => {
+    const {cwd = process.cwd()} = options
+    return root => {
+      const decls = new Map()
+
+      root.walkDecls(/^\$/, decl => {
+        const {prop, value} = decl
+        if (decl.parent === root && !value.startsWith('(')) {
+          decl.value = value.replace(/ *!default$/, '')
+          decls.set(prop, decl)
+        }
+      })
+
+      for (const [prop, decl] of decls.entries()) {
+        const {nodes} = valueParser(decl.value)
+        const values = [valueParser.stringify(nodes)]
+        while (nodes.some(node => decls.has(node.value))) {
+          for (const node of nodes) {
+            const {value} = node
+            if (decls.has(value)) {
+              node.value = decls.get(value).value
+            }
+          }
+          values.push(valueParser.stringify(nodes))
+        }
+
+        const {source} = decl
+        variables[prop] = {
+          values,
+          source: {
+            path: source.input.file.replace(`${cwd}/`, ''),
+            line: source.start.line
+          }
+        }
+      }
+
+      const container = postcss.rule({selector: ':root'})
+      for (const [prop, decl] of decls.entries()) {
+        container.append(
+          postcss.decl({
+            prop: `--${prop.substr(1)}`,
+            value: `#{${decl.value}}`
+          })
+        )
+      }
+      root.append(container)
+    }
+  })
+}
+
+function sortObject(obj, cmp) {
+  const out = {}
+  for (const [key, value] of Object.entries(obj).sort(cmp)) {
+    out[key] = value
+  }
+  return out
+}
+
+function last(list) {
+  return list[list.length - 1]
+}
--- a/script/dist.js
+++ b/script/dist.js
@ -69,6 +69,7 @@ remove(outDir)
        const meta = {bundles}
        return writeFile(join(outDir, 'meta.json'), JSON.stringify(meta, null, 2), encoding)
      })
+      .then(writeVariableData)
      .then(writeDeprecationData)
  })
  .catch(error => {
@ -102,3 +103,10 @@ function writeDeprecationData() {
  }
  return writeFile(join(outDir, 'deprecations.json'), JSON.stringify(data, null, 2))
 }
+
+function writeVariableData() {
+  const analyzeVariables = require('./analyze-variables')
+  return analyzeVariables('src/support/index.scss').then(data =>
+    writeFile(join(outDir, 'variables.json'), JSON.stringify(data, null, 2))
+  )
+}
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@ -94,75 +94,6 @@
  border-radius: 6px;
 }

-// Hidden text button
-//
-// Use `.hidden-text-expander` to indicate and expand hidden text.
-.hidden-text-expander {
-  display: block;
-
-  &.inline {
-    position: relative;
-    top: -1px;
-    display: inline-block;
-    margin-left: 5px;
-    line-height: 0;
-  }
-}
-
-.hidden-text-expander a,
-.ellipsis-expander {
-  display: inline-block;
-  height: 12px;
-  padding: 0 5px 5px;
-  font-size: $font-size-small;
-  font-weight: $font-weight-bold;
-  line-height: 6px;
-  color: $gray-700;
-  text-decoration: none;
-  vertical-align: middle;
-  background: lighten($gray-300, 5%);
-  border: 0;
-  border-radius: 1px;
-
-  &:hover {
-    text-decoration: none;
-    background-color: darken($gray-300, 4%);
-  }
-
-  &:active {
-    color: $text-white;
-    background-color: $blue-400;
-  }
-}
-
-// Social count bubble
-//
-// A container that is used for social bubbles counts.
-.social-count {
-  float: left;
-  padding: 3px 10px;
-  font-size: $font-size-small;
-  font-weight: $font-weight-bold;
-  line-height: 20px;
-  color: $text-gray-dark;
-  vertical-align: middle;
-  background-color: $bg-white;
-  border: 1px solid transparentize($black, 0.8); // match with .btn
-  border-left: 0;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-
-  &:hover,
-  &:active {
-    text-decoration: none;
-  }
-
-  &:hover {
-    color: $text-blue;
-    cursor: pointer;
-  }
-}
-
 // Full-width button
 //
 // These buttons expand to the full width of their parent container
@ -201,11 +132,53 @@
  }
 }

-.details-reset {
-  // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
-  // Remove marker added by details polyfill
-  > summary::before { display: none; }
-  // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
+// Invisible button
+//
+// Typically used as a "cancel" button next to a .btn
+.btn-invisible {
+  color: $text-blue;
+  background-color: $bg-white; // Reset default gradient backgrounds and colors
+  background-image: none;
+  border: 0;
+
+  &:hover,
+  &:active,
+  &:focus,
+  &.selected,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: $text-blue;
+    background: none;
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+// Octicon button
+//
+// Icon-only buttons
+.btn-octicon {
+  display: inline-block;
+  padding: 5px;
+  margin-left: 5px;
+  line-height: $lh-condensed-ultra;
+  color: $text-gray;
+  vertical-align: middle;
+
+  // For `<button>` elements
+  background: transparent;
+  border: 0;
+
+  &:hover { color: $text-blue; }
+
+  &.disabled {
+    color: $gray-400;
+    cursor: default;
+
+    &:hover { color: $gray-400; }
+  }
+}
+
+.btn-octicon-danger:hover {
+  color: $text-red;
 }
--- a/src/buttons/index.scss
+++ b/src/buttons/index.scss
@ -1,3 +1,4 @@
@import "../support/index.scss";
@import "./button.scss";
@import "./button-group.scss";
+@import "./misc.scss";
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@ -0,0 +1,80 @@
+// stylelint-disable selector-max-type
+
+// Close button
+//
+// Typically used with an octicon-x
+.close-button {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+
+// Hidden text button
+//
+// Use `.hidden-text-expander` to indicate and expand hidden text.
+.hidden-text-expander {
+  display: block;
+
+  &.inline {
+    position: relative;
+    top: -1px;
+    display: inline-block;
+    margin-left: 5px;
+    line-height: 0;
+  }
+}
+
+.hidden-text-expander a,
+.ellipsis-expander {
+  display: inline-block;
+  height: 12px;
+  padding: 0 5px 5px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  line-height: 6px;
+  color: $gray-700;
+  text-decoration: none;
+  vertical-align: middle;
+  background: lighten($gray-300, 5%);
+  border: 0;
+  border-radius: 1px;
+
+  &:hover {
+    text-decoration: none;
+    background-color: darken($gray-300, 4%);
+  }
+
+  &:active {
+    color: $text-white;
+    background-color: $blue-400;
+  }
+}
+
+// Social count bubble
+//
+// A container that is used for social bubbles counts.
+.social-count {
+  float: left;
+  padding: 3px 10px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  line-height: 20px;
+  color: $text-gray-dark;
+  vertical-align: middle;
+  background-color: $bg-white;
+  border: 1px solid transparentize($black, 0.8); // match with .btn
+  border-left: 0;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+
+  &:hover,
+  &:active {
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: $text-blue;
+    cursor: pointer;
+  }
+}
--- a/src/labels/diffstat.scss
+++ b/src/labels/diffstat.scss
@ -0,0 +1,32 @@
+// diffstat
+//
+// Green/red blocks showing additions and deletions
+
+.diffstat {
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+  color: $text-gray;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.diffstat-block-deleted,
+.diffstat-block-added,
+.diffstat-block-neutral {
+  display: inline-block;
+  width: $spacer-2;
+  height: $spacer-2;
+  margin-left: 1px;
+}
+
+.diffstat-block-deleted {
+  background-color: $bg-diffstat-deleted;
+}
+
+.diffstat-block-added {
+  background-color: $bg-diffstat-added;
+}
+
+.diffstat-block-neutral {
+  background-color: $bg-diffstat-neutral;
+}
--- a/src/labels/index.scss
+++ b/src/labels/index.scss
@ -1,4 +1,6 @@
@import "../support/index.scss";
+@import "./issue-labels.scss";
@import "./labels.scss";
@import "./states.scss";
@import "./counters.scss";
+@import "./diffstat.scss";
--- a/src/labels/issue-labels.scss
+++ b/src/labels/issue-labels.scss
@ -0,0 +1,40 @@
+// Issue Labels
+
+.IssueLabel {
+  height: 20px;
+  padding: 0.15em $spacer-1;
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+  line-height: 15px;
+  border-radius: 2px;
+  box-shadow: inset 0 -1px 0 rgba($black, 0.12);
+
+  .g-emoji {
+    position: relative;
+    top: -0.05em;
+    display: inline-block;
+    font-size: 1em;
+    line-height: $lh-condensed-ultra;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.IssueLabel--big {
+  padding: $spacer-1 $spacer-2;
+  font-size: $h5-size;
+  font-weight: $font-weight-bold;
+  border-radius: $border-radius;
+  transition: opacity 0.2s linear;
+
+  .g-emoji {
+    display: inline-block;
+    margin-top: -1px;
+  }
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
--- a/src/navigation/underline-nav.scss
+++ b/src/navigation/underline-nav.scss
@ -31,7 +31,9 @@
    }
  }

-  &.selected {
+  &.selected, // TODO@14.0.0: remove &.selected
+  &[role=tab][aria-selected=true],
+  &[aria-current] {
    font-weight: $font-weight-bold;
    color: $text-gray-dark;
    border-bottom-color: $orange-600;
--- a/src/product/index.scss
+++ b/src/product/index.scss
@ -26,4 +26,5 @@
@import "../progress/index.scss";
@import "../select-menu/index.scss";
@import "../subhead/index.scss";
+@import "../timeline/index.scss";
@import "../toasts/index.scss"
--- a/src/support/variables/colors.scss
+++ b/src/support/variables/colors.scss
@ -54,6 +54,11 @@ $bg-yellow:         $yellow-500 !default;
 $bg-yellow-light:   $yellow-200 !default;
 $bg-yellow-dark:    $yellow-700 !default;

+// diffstat background colors
+$bg-diffstat-added: darken($green-400, 5%) !default;
+$bg-diffstat-deleted: $red-600 !default;
+$bg-diffstat-neutral: $gray-300 !default;
+
 // Text colors
 $text-blue:         $blue-500 !default;
 $text-gray-dark:    $gray-900 !default;
--- a/src/timeline/README.md
+++ b/src/timeline/README.md
@ -0,0 +1,25 @@
+---
+bundle: "timeline"
+generated: true
+---
+
+# Primer CSS: `timeline` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/timeline/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/timeline.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
--- a/src/timeline/index.scss
+++ b/src/timeline/index.scss
@ -0,0 +1,2 @@
+@import "../support/index.scss";
+@import "./timeline-item.scss";
--- a/src/timeline/timeline-item.scss
+++ b/src/timeline/timeline-item.scss
@ -0,0 +1,85 @@
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: $spacer-3 0;
+  margin-left: $spacer-3;
+
+  // The Timeline
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 2px;
+    content: "";
+    background-color: $gray-200;
+  }
+
+  &:target .TimelineItem-badge {
+    border-color: $blue-400;
+    box-shadow: 0 0 0.2em $blue-200;
+  }
+}
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: $spacer-5;
+  height: $spacer-5;
+  margin-right: $spacer-2;
+  margin-left: -$spacer-3 + 1;
+  color: $gray-700;
+  align-items: center;
+  background-color: $gray-200;
+  border: 2px solid $white;
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: $spacer-1;
+  color: $gray-700;
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  left: -($spacer-6 + $spacer-5);
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: $spacer-4;
+  margin: 0;
+  margin-bottom: -$spacer-3;
+  margin-left: -($spacer-6 + $spacer-3);
+  background-color: $white;
+  border: 0;
+  border-top: 4px solid $gray-200;
+}
+
+.TimelineItem--condensed {
+  padding-top: $spacer-1;
+  padding-bottom: 0;
+
+  // TimelineItem--condensed is often grouped. (commits)
+  &:last-child {
+    padding-bottom: $spacer-3;
+  }
+
+  .TimelineItem-badge {
+    height: $spacer-3;
+    margin-top: $spacer-2;
+    margin-bottom: $spacer-2;
+    color: $gray-400;
+    background-color: $white;
+    border: 0;
+  }
+}
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@ -17,3 +17,12 @@
  z-index: 99;
  background: $black-fade-50;
 }
+
+.details-reset {
+  // Remove marker added by the display: list-item browser default
+  > summary { list-style: none; }
+  // Remove marker added by details polyfill
+  > summary::before { display: none; }
+  // Remove marker added by Chrome
+  > summary::-webkit-details-marker { display: none; }
+}
--- a/stylelint.config.js
+++ b/stylelint.config.js
@ -1,7 +1,11 @@
+const currentVersion = process.env.PRIMER_VERSION || require('./package.json').version
+
 module.exports = {
  extends: ['stylelint-config-primer'],
+  plugins: ['./lib/stylelint-todo'],
  syntax: 'scss',
  rules: {
-    'primer/no-override': false
+    'primer/no-override': false,
+    'primer-css/TODO': [true, {currentVersion, severity: 'error'}]
  }
 }