Add primer-css (temporarily)

resources/scss/normalize.css/normalize.css

@@ -0,0 +1,419 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 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
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -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).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[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 {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}

resources/scss/primer-css/index.scss

@@ -0,0 +1,26 @@
+/*!
+ * Primer
+ * http://primercss.io
+ *
+ * Released under MIT license. Copyright 2015 GitHub, Inc.
+ */
+// Primer master file
+//
+// Imports all Primer files in their intended order for easy mass-inclusion.
+// Should you need specific files, you can easily use separate `@import`s.
+// Global requirements
+@import "primer-support/index.scss";
+@import "primer-base/index.scss";
+@import "primer-utilities/index.scss";
+@import "primer-forms/index.scss";
+@import "primer-layout/index.scss";
+@import "primer-buttons/index.scss";
+@import "primer-alerts/index.scss";
+@import "primer-avatars/index.scss";
+@import "primer-blankslate/index.scss";
+@import "primer-navigation/index.scss";
+@import "primer-states/index.scss";
+@import "primer-tooltips/index.scss";
+@import "primer-markdown/index.scss";
+@import "primer-flex-table/index.scss";
+@import "primer-truncate/index.scss";

resources/scss/primer-css/primer-alerts/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import "../primer-support/index.scss";
+@import "./lib/flash.scss";

resources/scss/primer-css/primer-alerts/lib/flash.scss

@@ -0,0 +1,98 @@
+// Default flash
+.flash {
+  position: relative;
+  padding: 15px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: $flash-text-blue;
+  background-color: $flash-bg-blue;
+  border: 1px solid $flash-border-blue;
+  border-radius: 3px;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Contain the flash messages
+.flash-messages {
+  margin-bottom: 20px;
+}
+
+// Close button
+.flash-close {
+  float: right;
+  width: 34px;
+  height: 44px;
+  margin: -11px;
+  line-height: 40px;
+  color: inherit;
+  text-align: center;
+  cursor: pointer;
+  // Undo `<button>` styles
+  background: none;
+  border: 0;
+  appearance: none;
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+// Action button
+.flash-action {
+  float: right;
+  margin-top: -4px;
+  margin-left: 20px;
+}
+
+//
+// Variations
+//
+
+.flash-warn {
+  color: $flash-text-yellow;
+  background-color: $flash-bg-yellow;
+  border-color: $flash-border-yellow;
+}
+
+.flash-error {
+  color: $flash-text-red;
+  background-color: $flash-bg-red;
+  border-color: $flash-border-red;
+}
+
+.flash-full {
+  margin-top: -1px;
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+.flash-with-icon {
+  .container {
+    padding-left: 40px;
+  }
+
+  .flash-icon {
+    float: left;
+    margin-top: 3px;
+    margin-left: -25px;
+  }
+}
+
+// Content within
+//
+// Reset margins on headings and paragraphs within alerts.
+.flash-content {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 1.5;
+}
+
+.warning {
+  padding: 0.5em;
+  margin-bottom: 0.8em;
+  font-weight: bold;
+  background-color: #fffccc;
+}

resources/scss/primer-css/primer-avatars/index.scss

@@ -0,0 +1,6 @@
+@import "../primer-support/index.scss";
+
+// Avatars
+@import "./lib/avatar.scss";
+@import "./lib/avatar-parent-child.scss";
+@import "./lib/avatar-stack.scss";

resources/scss/primer-css/primer-avatars/lib/avatar-parent-child.scss

@@ -0,0 +1,16 @@
+// .avatar-parent-child is when you see a small avatar at the bottom right
+// corner of a larger avatar.
+//
+// No Styleguide version
+.avatar-parent-child {
+  position: relative;
+}
+
+.avatar-child {
+  position: absolute;
+  right: -15%;
+  bottom: -9%;
+  background-color: $bg-white; // For transparent backgrounds
+  border-radius: 2px;
+  box-shadow: -2px -2px 0 rgba(255, 255, 255, 0.8);
+}

resources/scss/primer-css/primer-avatars/lib/avatar-stack.scss

@@ -0,0 +1,39 @@
+// Stacked avatars can be used to show who is participating in thread when
+// there is limited space available.
+//
+// No styleguide references
+.avatar-stack {
+  display: inline-block;
+  white-space: nowrap;
+
+  .avatar {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-right: -15px;
+    background-color: #fff;
+    border-right: 1px solid #fff;
+    border-radius: 2px;
+    transition: margin 0.1s ease-in-out;
+
+    &:first-child {
+      z-index: 3;
+    }
+
+    &:last-child {
+      z-index: 1;
+      margin-right: 0;
+    }
+  }
+
+  // When more than one avatar, margin-left will animate from -15 to 2, and reveal the stack
+  &:hover .avatar {
+    margin-right: 3px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

resources/scss/primer-css/primer-avatars/lib/avatar.scss

@@ -0,0 +1,20 @@
+.avatar {
+  display: inline-block;
+  overflow: hidden; // Ensure page layout in Firefox should images fail to load
+  line-height: 1;
+  vertical-align: middle;
+  border-radius: 3px;
+}
+
+.avatar-small { border-radius: 2px; }
+
+.avatar-link {
+  float: left;
+  line-height: 1;
+}
+
+// User for example on /stars and /user for grids of avatars
+.avatar-group-item {
+  display: inline-block;
+  margin-bottom: 3px;
+}

resources/scss/primer-css/primer-base/index.scss

@@ -0,0 +1,4 @@
+@import "../primer-support/index.scss";
+@import "../../normalize.css/normalize";
+@import "./lib/base.scss";
+@import "./lib/typography-base.scss";

resources/scss/primer-css/primer-base/lib/base.scss

@@ -0,0 +1,66 @@
+* {
+  box-sizing: border-box;
+}
+
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+body {
+  font-family: $body-font;
+  font-size: $body-font-size;
+  line-height: $body-line-height;
+  color: $text-gray-dark;
+  background-color: $bg-white;
+}
+
+a {
+  color: $text-blue;
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+}
+
+strong {
+  font-weight: $font-weight-bold;
+}
+
+// Horizontal lines
+//
+// TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s
+hr,
+.rule {
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #ddd;
+  @include clearfix();
+}
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+button {
+  cursor: pointer;
+}

resources/scss/primer-css/primer-base/lib/typography-base.scss

@@ -0,0 +1,85 @@
+// Headings
+// --------------------------------------------------
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+h1 { @include h1; }
+h2 { @include h2; }
+h3 { @include h3; }
+h4 { @include h4; }
+h5 { @include h5; }
+h6 { @include h6; }
+
+// Body text
+// --------------------------------------------------
+
+p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+small {
+  font-size: 90%;
+}
+
+blockquote {
+  margin: 0;
+}
+
+// Lists
+// --------------------------------------------------
+
+ul,
+ol {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ol ol,
+ul ol {
+  list-style-type: lower-roman;
+}
+
+ul ul ol,
+ul ol ol,
+ol ul ol,
+ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+dd {
+  margin-left: 0;
+}
+
+// Code
+// --------------------------------------------------
+
+tt,
+code {
+  font-family: $mono-font;
+  font-size: 12px;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font: 12px $mono-font;
+}
+
+// Octicons
+// --------------------------------------------------
+
+// Move this over here as a temporary override to the octicons source repo
+// instead of updating that upstream.
+.octicon {
+  vertical-align: text-bottom;
+}

resources/scss/primer-css/primer-blankslate/index.scss

@@ -0,0 +1 @@
+@import "./lib/blankslate.scss";

resources/scss/primer-css/primer-blankslate/lib/blankslate.scss

@@ -0,0 +1,64 @@
+// stylelint-disable selector-no-qualifying-type
+.blankslate {
+  position: relative;
+  padding: 30px;
+  text-align: center;
+  background-color: #fafafa;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
+
+  code {
+    padding: 2px 5px 3px;
+    font-size: 14px;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 3px;
+  }
+}
+
+.blankslate-icon {
+  margin-right: 5px;
+  margin-bottom: 10px;
+  margin-left: 5px;
+  color: #aaa;
+}
+
+.blankslate-capped {
+  border-radius: 0 0 3px 3px;
+}
+
+.blankslate-spacious {
+  padding: 100px 60px 120px;
+}
+
+// was .has-fixed-width
+.blankslate-narrow {
+  width: 485px;
+  margin: 0 auto;
+}
+
+// was .large-format
+.blankslate-large {
+  h3 {
+    margin: 0.75em 0;
+    font-size: 20px;
+  }
+
+  p {
+    font-size: 16px;
+
+    &.has-fixed-width {
+      width: 540px;
+      margin: 0 auto;
+      text-align: left;
+    }
+  }
+}
+
+// was .clean-background
+.blankslate-clean-background {
+  background: none;
+  border: 0;
+  box-shadow: none;
+}

resources/scss/primer-css/primer-buttons/index.scss

@@ -0,0 +1,3 @@
+@import "../primer-support/index.scss";
+@import "./lib/button.scss";
+@import "./lib/button-group.scss";

resources/scss/primer-css/primer-buttons/lib/button-group.scss

@@ -0,0 +1,78 @@
+// Button group
+//
+// A button group is a series of buttons laid out next to each other, all part
+// of one visual button, but separated by rules to be separate.
+.btn-group {
+  display: inline-block;
+  vertical-align: middle;
+  @include clearfix();
+
+  .btn {
+    position: relative;
+    float: left;
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // Bring any button into forefront for proper borders given negative margin below
+    &:hover,
+    &:active,
+    &.selected {
+      z-index: 2;
+    }
+
+    &:focus {
+      z-index: 3;
+    }
+
+    // Tuck buttons into one another to prevent double border
+    + .btn {
+      margin-left: -1px;
+    }
+  }
+
+  .btn + .btn-group-form,
+  .btn-group-form + .btn,
+  .btn-group-form + .btn-group-form {
+    margin-left: -1px;
+  }
+
+  .btn-group-form {
+    float: left;
+
+    .btn {
+      border-radius: 0;
+    }
+
+    &:first-child {
+      .btn {
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+    }
+
+    &:last-child {
+      .btn {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    }
+  }
+}
+
+// Proper spacing for multiple button groups (a la, gollum editor)
+.btn-group + .btn-group,
+.btn-group + .btn {
+  margin-left: 5px;
+}

resources/scss/primer-css/primer-buttons/lib/button.scss

@@ -0,0 +1,337 @@
+// Shared styles
+.btn {
+  position: relative;
+  display: inline-block;
+  padding: 6px 12px;
+  font-size: $body-font-size;
+  font-weight: $font-weight-bold;
+  line-height: 20px; // Specifically not inherit or `<body>` default
+  color: $text-gray-dark;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: #eee;
+  background-image: linear-gradient(#fcfcfc, #eee);
+  border: 1px solid #d5d5d5;
+  border-radius: 3px;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+
+  i {
+    font-style: normal;
+    font-weight: 500;
+    opacity: 0.6;
+  }
+
+  .octicon {
+    vertical-align: text-top;
+  }
+
+  // Darken for just a tad more contrast against the button background
+  .counter {
+    text-shadow: none;
+    background-color: #e5e5e5;
+  }
+
+  &:focus {
+    text-decoration: none;
+    border-color: #51a7e8;
+    outline: none;
+    box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
+  }
+
+  &:focus:hover,
+  &.selected:focus {
+    border-color: #51a7e8;
+  }
+
+  &:hover,
+  &:active,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    text-decoration: none;
+    background-color: #ddd;
+    background-image: linear-gradient(#eee, #ddd);
+    border-color: #ccc;
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: #dcdcdc;
+    background-image: none;
+    border-color: #b5b5b5;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken(#dcdcdc, 5%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: rgba(102, 102, 102, 0.5);
+      cursor: default;
+      background-color: rgba(229, 229, 229, 0.5);
+      background-image: none;
+      border-color: rgba(197, 197, 197, 0.5);
+      box-shadow: none;
+    }
+  }
+}
+
+// Green primary button
+.btn-primary {
+  color: $text-white;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
+  background-color: #60b044;
+  background-image: linear-gradient(#8add6d, #60b044);
+  border-color: darken(#60b044, 2%);
+
+  .counter {
+    color: #60b044;
+    background-color: $bg-white;
+  }
+
+  &:hover {
+    color: $text-white;
+    background-color: darken(#60b044, 5%);
+    background-image: linear-gradient(darken(#8add6d, 5%), darken(#60b044, 5%));
+    border-color: #4a993e;
+  }
+
+  &:active,
+  &.selected {
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
+    background-color: darken(#60b044, 5%);
+    background-image: none;
+    border-color: darken(#4a993e, 5%);
+  }
+
+  &.selected:hover {
+    background-color: darken(#60b044, 10%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: #fefefe;
+      background-color: #add39f;
+      background-image: linear-gradient(#c3ecb4, #add39f);
+      border-color: #b9dcac #b9dcac #a7c89b;
+    }
+  }
+}
+
+// Red danger button
+.btn-danger {
+  color: #900;
+
+  &:hover {
+    color: $text-white;
+    background-color: #b33630;
+    background-image: linear-gradient(#dc5f59, #b33630);
+    border-color: #cd504a;
+  }
+
+  &:active,
+  &.selected {
+    color: $text-white;
+    background-color: #b33630;
+    background-image: none;
+    border-color: darken(#cd504a, 15%);
+  }
+
+  &.selected:hover {
+    background-color: darken(#b33630, 5%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: #cb7f7f;
+      background-color: #efefef;
+      background-image: linear-gradient(#fefefe, #efefef);
+      border-color: #e1e1e1;
+    }
+  }
+
+  &:hover,
+  &:active,
+  &.selected {
+    .counter {
+      color: #b33630;
+      background-color: $bg-white;
+    }
+  }
+}
+
+// Outline button
+//
+// For when we need a linky-action that's not too heavy in busier
+// areas like conversation timelines.
+.btn-outline {
+  color: $text-blue;
+  background-color: $bg-white; // Reset default gradient backgrounds and colors
+  background-image: none;
+  border: 1px solid #e5e5e5;
+
+  .counter {
+    background-color: #eee;
+  }
+
+  &:hover,
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: $text-white;
+    background-color: $bg-blue;
+    background-image: none;
+    border-color: $blue;
+
+    .counter {
+      color: $text-blue;
+      background-color: $bg-white;
+    }
+  }
+
+  &.selected:hover {
+    background-color: darken($blue, 5%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: $text-gray;
+      background-color: $bg-white;
+      background-image: none;
+      border-color: #e5e5e5;
+    }
+  }
+}
+
+// Social button count
+.btn-with-count {
+  float: left;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+// Minibutton overrides
+//
+// Tweak `line-height` to make them smaller.
+.btn-sm {
+  padding: 3px 10px;
+  font-size: $font-size-small;
+  line-height: 20px;
+}
+
+// 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: 12px;
+  font-weight: bold;
+  line-height: 6px;
+  color: #555;
+  text-decoration: none;
+  vertical-align: middle;
+  background: #ddd;
+  border: 0;
+  border-radius: 1px;
+
+  &:hover {
+    text-decoration: none;
+    background-color: #ccc;
+  }
+
+  &:active {
+    color: $text-white;
+    background-color: #4183c4;
+  }
+}
+
+// Social count bubble
+//
+// A container that is used for social bubbles counts.
+.social-count {
+  float: left;
+  padding: 3px 7px;
+  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 #ddd;
+  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
+.btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+// Radio buttons
+//
+// Buttons backed by radio or checkbox control. Requires the use of `.hidden`
+// on the `input` to properly hide it.
+.btn-link {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  color: $text-blue;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &:focus {
+    outline: none; // Prevents the blue ring when clicked.
+  }
+}

resources/scss/primer-css/primer-flex-table/index.scss

@@ -0,0 +1 @@
+@import "./lib/flex-table.scss";

resources/scss/primer-css/primer-flex-table/lib/flex-table.scss

@@ -0,0 +1,20 @@
+// Flex table is a module for creating dynamically resizable elements that
+// always sit on the same horizontal line (e.g., they never wrap). Using
+// tables means it's cross browser friendly.
+
+.flex-table {
+  display: table;
+}
+
+// Place this on every "cell"
+.flex-table-item {
+  display: table-cell;
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+// Place this on the largest or most important "cell"
+.flex-table-item-primary {
+  width: 99%;
+}

resources/scss/primer-css/primer-forms/index.scss

@@ -0,0 +1,5 @@
+@import "../primer-support/index.scss";
+@import "./lib/form-control.scss";
+@import "./lib/form-select.scss";
+@import "./lib/form-group.scss";
+@import "./lib/form-validation.scss";

resources/scss/primer-css/primer-forms/lib/form-control.scss

@@ -0,0 +1,192 @@
+// Needs refactoring
+// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
+// Base form controls
+//
+// Overrides for common inputs for easier styling.
+
+// Disable ligatures in editable areas due to https://github.com/github/github/issues/56941
+input,
+textarea {
+  font-feature-settings: "liga" 0;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+label {
+  font-weight: $font-weight-bold;
+}
+
+.form-control,
+.form-select {
+  min-height: 34px;
+  padding: 6px 8px;
+  font-size: $body-font-size;
+  line-height: 20px;
+  color: $text-gray-dark;
+  vertical-align: middle;
+  background-color: $bg-white;
+  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
+  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
+  border: 1px solid $border-gray-dark;
+  border-radius: 3px;
+  outline: none;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+
+  &.focus,
+  &:focus {
+    border-color: #51a7e8;
+    outline: none;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
+  }
+}
+
+// Inputs with contrast for easy light gray backgrounds against white.
+.input-contrast {
+  background-color: $bg-gray-light;
+
+  &:focus { background-color: $bg-white; }
+}
+
+// Custom styling for HTML5 validation bubbles (WebKit only)
+::placeholder {
+  color: $text-gray-light;
+}
+
+// Mini inputs, to match .minibutton
+.input-sm {
+  min-height: 28px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: $font-size-small;
+  line-height: 20px;
+}
+
+// Large inputs
+.input-lg {
+  padding: 6px 10px;
+  font-size: 16px;
+}
+
+// Full-width inputs
+.input-block {
+  display: block;
+  width: 100%;
+}
+
+// Inputs with monospace text
+.input-monospace {
+  font-family: $mono-font;
+}
+
+// Checkboxes and Radiobuttons
+//
+// For checkboxes and radio button selections.
+.form-checkbox {
+  padding-left: 20px;
+  margin: 15px 0;
+  vertical-align: middle;
+
+  label {
+    em.highlight {
+      position: relative;
+      left: -4px;
+      padding: 2px 4px;
+      font-style: normal;
+      background: #fffbdc;
+      border-radius: 3px;
+    }
+  }
+
+  input[type=checkbox],
+  input[type=radio] {
+    float: left;
+    margin: 5px 0 0 -20px;
+    vertical-align: middle;
+  }
+
+  .note {
+    display: block;
+    margin: 0;
+    font-size: 12px;
+    font-weight: normal;
+    color: #666;
+  }
+}
+
+// Field groups
+//
+// Wrap field groups in `<div.hfields>` to lay them out horizontally - great for
+// the top of pages with autosave.
+.hfields {
+  margin: 15px 0;
+  @include clearfix;
+
+  .form-group {
+    float: left;
+    margin: 0 30px 0 0;
+
+    dt {
+      label {
+        display: inline-block;
+        margin: 5px 0 0;
+        color: #666;
+      }
+
+      img {
+        position: relative;
+        top: -2px;
+      }
+    }
+  }
+
+  .btn {
+    float: left;
+    margin: 28px 25px 0 -20px;
+  }
+
+  .form-select { margin-top: 5px; }
+}
+
+// Hide the up/down buttons in <input type="number"> in the login form, the
+// input is used for two-factor auth codes, type="number" makes it more usable
+// on phones
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+// Input groups
+
+.form-actions {
+  @include clearfix;
+
+  .btn {
+    float: right;
+
+    + .btn {
+      margin-right: 5px;
+    }
+  }
+}
+
+.form-warning {
+  padding: 8px 10px;
+  margin: 10px 0;
+  font-size: 14px;
+  color: $flash-text-yellow;
+  background: $flash-bg-yellow;
+  border: 1px solid $flash-border-yellow;
+  border-radius: 3px;
+
+  p {
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  a { font-weight: bold; }
+}

resources/scss/primer-css/primer-forms/lib/form-group.scss

@@ -0,0 +1,214 @@
+// Form groups
+//
+// Typical form groups - `<dl.form-group>` with a `<dt>` containing the label and
+// `<dd> containing the form elements.
+// stylelint-disable selector-max-compound-selectors
+.form-group {
+  margin: 15px 0;
+
+  // Text fields
+  .form-control {
+    width: 440px;
+    max-width: 100%;
+    margin-right: 5px;
+    background-color: $bg-gray-light;
+
+    &:focus {
+      background-color: $bg-white;
+    }
+
+    &.shorter { width: 130px; }
+
+    &.short { width: 250px; }
+
+    &.long { width: 100%; }
+  }
+
+  // Textarea
+  // stylelint-disable selector-no-qualifying-type
+  textarea.form-control {
+    width: 100%;
+    height: 200px;
+    min-height: 200px;
+
+    &.short {
+      height: 50px;
+      min-height: 50px;
+    }
+  }
+  // stylelint-enable selector-no-qualifying-type
+
+  // The Label
+  dt {
+    margin: 0 0 6px;
+  }
+
+  label {
+    position: relative;
+  }
+
+  &.flattened dt {
+    float: left;
+    margin: 0;
+    line-height: 32px;
+  }
+
+  &.flattened dd {
+    line-height: 32px;
+  }
+
+  //
+  // Form Elements
+  //
+  // stylelint-disable selector-no-qualifying-type
+  dd {
+    h4 {
+      margin: 4px 0 0;
+
+      &.is-error { color: $text-red; }
+
+      &.is-success { color: $text-green; }
+
+      + .note {
+        margin-top: 0;
+      }
+    }
+  }
+  // stylelint-enable selector-no-qualifying-type
+
+  //
+  // Variants
+  //
+
+  &.required {
+    dt label::after {
+      padding-left: 5px;
+      color: $text-red;
+      content: "*";
+    }
+  }
+
+  // Form AJAX states
+  //
+  // Form fields that need feedback for AJAX loading, success
+  // states and errored states.
+  .success,
+  .error,
+  .indicator {
+    display: none;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  &.loading {
+    opacity: 0.5;
+
+    .indicator {
+      display: inline;
+    }
+
+    .spinner {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  &.successful {
+    .success {
+      display: inline;
+      color: $text-green;
+    }
+  }
+
+  // Form validation
+  //
+  // Our inline errors
+
+  &.warn,
+  &.errored {
+    .warning,
+    .error {
+      position: absolute;
+      z-index: 10;
+      display: inline-block;
+      max-width: 450px; // Keep our long errors readable
+      padding: 5px 8px;
+      margin: $spacer-1 0 0;
+      font-size: 13px;
+      font-weight: normal;
+      border-style: solid;
+      border-width: 1px;
+      border-radius: 3px;
+
+      &::after,
+      &::before {
+        position: absolute;
+        bottom: 100%;
+        left: 10px;
+        z-index: 15;
+        width: 0;
+        height: 0;
+        pointer-events: none;
+        content: " ";
+        border: solid transparent;
+      }
+
+      &::after {
+        border-width: 5px;
+      }
+
+      &::before {
+        margin-left: -1px;
+        border-width: 6px;
+      }
+    }
+  }
+
+  &.warn {
+    .warning {
+      color: $flash-text-yellow;
+      background-color: $flash-bg-yellow;
+      border-color: $flash-border-yellow;
+
+      &::after {
+        border-bottom-color: $flash-bg-yellow;
+      }
+
+      &::before {
+        border-bottom-color: $flash-border-yellow;
+      }
+    }
+  }
+
+  &.errored {
+    label {
+      color: $text-red;
+    }
+
+    .error {
+      color: $flash-text-red;
+      background-color: $flash-bg-red;
+      border-color: $flash-border-red;
+
+      &::after {
+        border-bottom-color: $flash-bg-red;
+      }
+
+      &::before {
+        border-bottom-color: $flash-border-red;
+      }
+    }
+  }
+}
+
+.note {
+  min-height: 17px;
+  margin: 4px 0 2px;
+  font-size: 12px;
+  color: $text-gray;
+
+  .spinner {
+    margin-right: 3px;
+    vertical-align: middle;
+  }
+}

resources/scss/primer-css/primer-forms/lib/form-select.scss

@@ -0,0 +1,38 @@
+// Custom select
+//
+// Apply `.select` to any `<select>` element for custom styles.
+.form-select {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  // IE9 hacks to reduce padding
+  padding-right: 24px;
+  padding-right: 8px \9;
+  background: $bg-white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
+  // IE9 hacks to hide the background-image
+  background-image: none \9;
+  background-size: 8px 10px;
+  appearance: none;
+
+  // Hides the default caret in IE11
+  &::-ms-expand {
+    opacity: 0;
+  }
+
+  &[multiple] {
+    height: auto;
+  }
+}
+
+.select-sm {
+  height: 28px;
+  min-height: 28px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: $font-size-small;
+
+  &[multiple] {
+    height: auto;
+    min-height: 0;
+  }
+}

resources/scss/primer-css/primer-forms/lib/form-validation.scss

@@ -0,0 +1,395 @@
+// Needs refactoring
+// stylelint-disable selector-no-qualifying-type, selector-no-type
+dl.form-group > dd {
+  .form-control {
+    &.is-autocheck-loading,
+    &.is-autocheck-successful,
+    &.is-autocheck-errored {
+      padding-right: 30px; // Leave some space for our validation icons
+    }
+
+    &.is-autocheck-loading {
+      background-image: url("/images/spinners/octocat-spinner-16px.gif");
+    }
+
+    &.is-autocheck-successful {
+      background-image: url("/images/modules/ajax/success.png");
+    }
+
+    &.is-autocheck-errored {
+      background-image: url("/images/modules/ajax/error.png");
+    }
+  }
+}
+
+// Retinization of form validation icons that aren't octicons yet
+@include retina-media-query {
+  dl.form-group > dd {
+    .form-control {
+      &.is-autocheck-loading,
+      &.is-autocheck-successful,
+      &.is-autocheck-errored {
+        background-size: 16px 16px;
+      }
+
+      &.is-autocheck-loading {
+        background-image: url("/images/spinners/octocat-spinner-32.gif");
+      }
+
+      &.is-autocheck-successful {
+        background-image: url("/images/modules/ajax/success@2x.png");
+      }
+
+      &.is-autocheck-errored {
+        background-image: url("/images/modules/ajax/error@2x.png");
+      }
+    }
+  }
+}
+
+// Credit cards
+//
+// A selector for credit cards. Shows all credit cards we have available and
+// dims the non-selected ones.
+
+.form-cards {
+  height: 31px;
+  margin: 0 0 15px;
+
+  .card {
+    float: left;
+    width: 47px;
+    height: 31px;
+    text-indent: -9999px;
+    background-image: url("/images/modules/pricing/credit-cards-@1x.png");
+    background-position: 0 0;
+    opacity: 0.6;
+
+    &.visa { background-position: 0 0; }
+
+    &.amex { background-position: -50px 0; }
+
+    &.mastercard { background-position: -100px 0; }
+
+    &.discover { background-position: -150px 0; }
+
+    &.jcb { background-position: -200px 0; }
+
+    &.dinersclub { background-position: -250px 0; }
+
+    &.enabled { opacity: 1; }
+
+    &.disabled { opacity: 0.2; }
+  }
+
+  > .cards {
+    margin: 0;
+
+    > li {
+      float: left;
+      margin: 0 4px 0 0;
+      list-style-type: none;
+
+      &.text {
+        line-height: 31px;
+      }
+    }
+  }
+}
+
+@include retina-media-query {
+  .form-cards > .cards .card {
+    background-image: url("/images/modules/pricing/credit-cards-@2x.png");
+    background-size: 300px 31px;
+  }
+}
+
+// Inline verification
+// This overrides primer's inline form stuff
+.status-indicator {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-left: 5px;
+  vertical-align: text-bottom;
+
+  .octicon {
+    display: none;
+  }
+}
+
+.status-indicator-success {
+  width: 12px;
+  margin-left: 7px;
+
+  // Override primer
+  &::before {
+    content: "";
+  }
+
+  .octicon-check {
+    display: inline-block;
+    color: $green;
+    fill: $green;
+  }
+
+  .octicon-x {
+    display: none;
+  }
+}
+
+.status-indicator-failed {
+  margin-left: 7px;
+
+  // Override primer
+  &::before {
+    content: "";
+  }
+
+  .octicon-check {
+    display: none;
+  }
+
+  .octicon-x {
+    display: inline-block;
+    color: $text-red;
+    fill: $red;
+  }
+}
+
+.status-indicator-loading {
+  width: 16px;
+  background: url("/images/spinners/octocat-spinner-32-EAF2F5.gif") 0 0 no-repeat;
+  background-size: 16px;
+}
+
+.inline-form {
+  display: inline-block;
+
+  .btn-plain {
+    background-color: transparent;
+    border: 0;
+  }
+}
+
+// Drag and drop
+//
+// Previously part of `_forms.scss` in Primer. Needs accounting for.
+
+.drag-and-drop {
+  padding: 7px 10px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 16px;
+  color: $text-gray;
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  border-top: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+
+  .default,
+  .loading,
+  .error {
+    display: none;
+  }
+
+  .error {
+    color: $text-red;
+  }
+
+  // Spinner
+  img {
+    vertical-align: top;
+  }
+}
+
+.is-default .drag-and-drop .default {
+  display: inline-block;
+}
+
+.is-uploading .drag-and-drop .loading {
+  display: inline-block;
+}
+
+.is-bad-file .drag-and-drop .bad-file {
+  display: inline-block;
+}
+
+.is-duplicate-filename .drag-and-drop .duplicate-filename {
+  display: inline-block;
+}
+
+.is-too-big .drag-and-drop .too-big {
+  display: inline-block;
+}
+
+.is-hidden-file .drag-and-drop .hidden-file {
+  display: inline-block;
+}
+
+.is-empty .drag-and-drop .empty {
+  display: inline-block;
+}
+
+.is-bad-permissions .drag-and-drop .bad-permissions {
+  display: inline-block;
+}
+
+.is-repository-required .drag-and-drop .repository-required {
+  display: inline-block;
+}
+
+.drag-and-drop-error-info {
+  font-weight: normal;
+  color: $text-gray;
+
+  a {
+    color: $text-blue;
+  }
+}
+
+.is-failed .drag-and-drop .failed-request {
+  display: inline-block;
+}
+
+.manual-file-chooser {
+  position: absolute;
+  width: 240px;
+  padding: 5px;
+  margin-left: -80px;
+  cursor: pointer;
+  opacity: 0.0001;
+}
+
+.manual-file-chooser:hover + .manual-file-chooser-text {
+  text-decoration: underline;
+}
+
+.btn {
+  // align manual-file-chooser inside a button
+  .manual-file-chooser {
+    top: 0;
+    padding: 0;
+    line-height: 34px;
+  }
+}
+
+// Focused Textarea styles
+.upload-enabled textarea {
+  display: block;
+  border-bottom: 1px dashed #ddd;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.focused .drag-and-drop {
+  border-color: #51a7e8;
+  box-shadow: rgba(#51a7e8, 0.5) 0 0 3px;
+}
+
+// Dropping a file on top
+.dragover textarea,
+.dragover .drag-and-drop {
+  box-shadow: rgba(#c9ff00, 1) 0 0 3px;
+}
+
+.write-content {
+  position: relative;
+}
+
+// Form style with a write and a preview tab
+.previewable-comment-form {
+  position: relative;
+
+  .tabnav {
+    position: relative;
+    padding: 10px 10px 0;
+  }
+
+  .comment {
+    border: 1px solid #cacaca;
+  }
+
+  .comment-form-error { margin-bottom: 10px; }
+
+  .write-content,
+  .preview-content {
+    display: none;
+    padding: 0 0 10px;
+    margin: 0 10px;
+  }
+
+  &.write-selected .write-content,
+  &.preview-selected .preview-content {
+    display: block;
+  }
+
+  textarea {
+    display: block;
+    width: 100%;
+    min-height: 100px;
+    max-height: 500px;
+    padding: 10px;
+    resize: vertical;
+  }
+}
+
+// Used in our boxed-group-less form styles. Give the sumbit button enough space
+// to breathe without the need for the extra hr.
+.form-action-spacious {
+  margin-top: 10px;
+}
+
+// A two column form, with a .main and a .sidebar column
+//
+// Override some `.timeline-comment-wrapper` defaults.
+// The `div` is needed to be more specific than the other class.
+div.composer {
+  margin-top: 0;
+  border: 0;
+}
+
+// Override the previewable comment form defaults
+.composer .comment-form-textarea {
+  height: 200px;
+  min-height: 200px;
+}
+
+.composer .tabnav { margin: 0 0 10px; }
+
+// Misc CSS
+//
+// Previously part of `_forms.scss` in Primer. Needs accounting for.
+
+h2.account {
+  margin: 15px 0 0;
+  font-size: 18px;
+  font-weight: normal;
+  color: #666;
+}
+
+p.explain {
+  position: relative;
+  font-size: 12px;
+  color: #666;
+
+  strong {
+    color: #333;
+  }
+
+  .octicon {
+    margin-right: 5px;
+    color: #bbb;
+  }
+
+  .minibutton {
+    top: -4px;
+    float: right;
+  }
+}
+
+// fix for chrome bug, see https://github.com/github/github/issues/53931
+.form-group label {
+  position: static;
+}

resources/scss/primer-css/primer-layout/index.scss

@@ -0,0 +1,4 @@
+@import "../primer-support/index.scss";
+@import "./lib/container.scss";
+@import "./lib/columns.scss";
+@import "./lib/grid.scss";

resources/scss/primer-css/primer-layout/lib/columns.scss

@@ -0,0 +1,69 @@
+// Grid system
+//
+// Create rows with `.columns` to clear the floated columns and outdent the
+// padding on `.column`s with negative margin for alignment.
+
+.columns {
+  margin-right: -$grid-gutter;
+  margin-left: -$grid-gutter;
+  @include clearfix;
+}
+
+// Base class for every column (requires a column width from below)
+.column {
+  float: left;
+  padding-right: $grid-gutter;
+  padding-left: $grid-gutter;
+}
+
+// Column widths
+.one-third {
+  width: 33.333333%;
+}
+
+.two-thirds {
+  width: 66.666667%;
+}
+
+.one-fourth {
+  width: 25%;
+}
+
+.one-half {
+  width: 50%;
+}
+
+.three-fourths {
+  width: 75%;
+}
+
+.one-fifth {
+  width: 20%;
+}
+
+.four-fifths {
+  width: 80%;
+}
+
+// Single column hack
+.single-column {
+  padding-right: $grid-gutter;
+  padding-left: $grid-gutter;
+}
+
+// Equal width columns via table sorcery.
+.table-column {
+  display: table-cell;
+  width: 1%;
+  padding-right: $grid-gutter;
+  padding-left: $grid-gutter;
+  vertical-align: top;
+}
+
+// Centers content horizontally. Can be used inside or outside the grid.
+.centered {
+  display: block;
+  float: none;
+  margin-right: auto;
+  margin-left: auto;
+}

resources/scss/primer-css/primer-layout/lib/container.scss

@@ -0,0 +1,33 @@
+// Fixed-width, centered column for site content.
+// This will be deprecated and replaced with container-lg in future
+.container {
+  width: $container-width;
+  margin-right: auto;
+  margin-left: auto;
+  @include clearfix;
+}
+
+// Handy container styles that match our breakpoints
+// 768px
+.container-md {
+  max-width: $container-md;
+  margin-right: auto;
+  margin-left: auto;
+  @include clearfix;
+}
+
+// 1004px - this matches the current fixed width: 980px + padding: px-3
+.container-lg {
+  max-width: $container-lg;
+  margin-right: auto;
+  margin-left: auto;
+  @include clearfix;
+}
+
+// 1280px
+.container-xl {
+  max-width: $container-xl;
+  margin-right: auto;
+  margin-left: auto;
+  @include clearfix;
+}

resources/scss/primer-css/primer-layout/lib/grid-offset.scss

@@ -0,0 +1,30 @@
+// Optional offset options to work with grid.scss
+
+// Offset Columns
+.offset-1 { margin-left: (1 / 12 * 100%); }
+.offset-2 { margin-left: (2 / 12 * 100%); }
+.offset-3 { margin-left: (3 / 12 * 100%); }
+.offset-4 { margin-left: (4 / 12 * 100%); }
+.offset-5 { margin-left: (5 / 12 * 100%); }
+.offset-6 { margin-left: (6 / 12 * 100%); }
+.offset-7 { margin-left: (7 / 12 * 100%); }
+.offset-8 { margin-left: (8 / 12 * 100%); }
+.offset-9 { margin-left: (9 / 12 * 100%); }
+.offset-10 { margin-left: (10 / 12 * 100%); }
+.offset-11 { margin-left: (11 / 12 * 100%); }
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
+    .offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
+    .offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
+    .offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
+    .offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
+    .offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
+    .offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
+    .offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
+    .offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
+    .offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
+    .offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
+  }
+}

resources/scss/primer-css/primer-layout/lib/grid.scss

@@ -0,0 +1,48 @@
+// GRID
+// stylelint-disable block-closing-brace-newline-after, declaration-block-properties-order, declaration-block-semicolon-newline-after, declaration-block-single-line-max-declarations
+
+// Columns
+.col-1 { width: (1 / 12 * 100%); }
+.col-2 { width: (2 / 12 * 100%); }
+.col-3 { width: (3 / 12 * 100%); }
+.col-4 { width: (4 / 12 * 100%); }
+.col-5 { width: (5 / 12 * 100%); }
+.col-6 { width: (6 / 12 * 100%); }
+.col-7 { width: (7 / 12 * 100%); }
+.col-8 { width: (8 / 12 * 100%); }
+.col-9 { width: (9 / 12 * 100%); }
+.col-10 { width: (10 / 12 * 100%); }
+.col-11 { width: (11 / 12 * 100%); }
+.col-12 { width: 100%; }
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
+    .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
+    .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
+    .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
+    .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
+    .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
+    .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
+    .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
+    .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
+    .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
+    .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
+    .col-#{$breakpoint}-12 { width: 100%; }
+  }
+}
+
+// Gutters apply padding and a negative margin to the outside of the container
+@mixin gutters ($gutter-width: $spacer3) {
+  margin-right: -$gutter-width;
+  margin-left: -$gutter-width;
+
+  > [class*="col-"] {
+    padding-right: $gutter-width !important;
+    padding-left: $gutter-width !important;
+  }
+}
+
+.gut-sm { @include gutters($spacer-2); }
+.gut-md { @include gutters($spacer-3); }
+.gut-lg { @include gutters($spacer-4); }

resources/scss/primer-css/primer-markdown/index.scss

@@ -0,0 +1,7 @@
+@import "../primer-support/index.scss";
+@import "./lib/markdown-body.scss";
+@import "./lib/headings.scss";
+@import "./lib/lists.scss";
+@import "./lib/tables.scss";
+@import "./lib/images.scss";
+@import "./lib/code.scss";

resources/scss/primer-css/primer-markdown/lib/code.scss

@@ -0,0 +1,75 @@
+.markdown-body {
+  // Inline code snippets
+  code,
+  tt {
+    padding: 0;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 3px; // don't add padding, gives scrollbars
+
+    &::before,
+    &::after {
+      letter-spacing: -0.2em; // this creates padding
+      content: "\00a0";
+    }
+
+    br { display: none; }
+  }
+
+  del code { text-decoration: inherit; }
+
+  pre {
+    word-wrap: normal;
+
+    // Code tags within code blocks (<pre>s)
+    > code {
+      padding: 0;
+      margin: 0;
+      font-size: 100%;
+      word-break: normal;
+      white-space: pre;
+      background: transparent;
+      border: 0;
+    }
+  }
+
+  .highlight {
+    margin-bottom: $margin;
+
+    pre {
+      margin-bottom: 0;
+      word-break: normal;
+    }
+  }
+
+  .highlight pre,
+  pre {
+    padding: $margin;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f7f7f7;
+    border-radius: 3px;
+  }
+
+  pre code,
+  pre tt {
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+
+    &::before,
+    &::after {
+      content: normal;
+    }
+  }
+}

resources/scss/primer-css/primer-markdown/lib/headings.scss

@@ -0,0 +1,64 @@
+// Needs refactoring
+// stylelint-disable selector-max-compound-selectors, selector-max-specificity
+.markdown-body {
+  // Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: ($margin * 1.5);
+    margin-bottom: $margin;
+    font-weight: $font-weight-bold;
+    line-height: $lh-condensed;
+
+    .octicon-link {
+      color: #000;
+      vertical-align: middle;
+      visibility: hidden;
+    }
+
+    &:hover .anchor {
+      text-decoration: none;
+
+      .octicon-link {
+        visibility: visible;
+      }
+    }
+
+    tt,
+    code {
+      font-size: inherit;
+    }
+  }
+
+  h1 {
+    padding-bottom: 0.3em;
+    font-size: 2em;
+    border-bottom: 1px solid #eee;
+  }
+
+  h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.5em;
+    border-bottom: 1px solid #eee;
+  }
+
+  h3 {
+    font-size: 1.25em;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  h5 {
+    font-size: 0.875em;
+  }
+
+  h6 {
+    font-size: 0.85em;
+    color: #777;
+  }
+}

resources/scss/primer-css/primer-markdown/lib/images.scss

@@ -0,0 +1,118 @@
+// Need to target base styles
+// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type, primer/selector-no-utility
+.markdown-body {
+  // Images & Stuff
+  img {
+    max-width: 100%;
+    // because we put padding on the images to hide header lines, and some people
+    // specify the width of their images in their markdown.
+    box-sizing: content-box;
+    background-color: #fff;
+
+    &[align=right] {
+      padding-left: 20px;
+    }
+
+    &[align=left] {
+      padding-right: 20px;
+    }
+  }
+
+  .emoji {
+    max-width: none;
+    vertical-align: text-top;
+    // Override `<img>` styles so Emjois don't clash with zebra striping in our tables
+    background-color: transparent;
+  }
+
+  // Gollum Image Tags
+
+  // Framed
+  span.frame {
+    display: block;
+    overflow: hidden;
+
+    > span {
+      display: block;
+      float: left;
+      width: auto;
+      padding: 7px;
+      margin: 13px 0 0;
+      overflow: hidden;
+      border: 1px solid #ddd;
+    }
+
+    span img {
+      display: block;
+      float: left;
+    }
+
+    span span {
+      display: block;
+      padding: 5px 0 0;
+      clear: both;
+      color: #333;
+    }
+  }
+
+  span.align-center {
+    display: block;
+    overflow: hidden;
+    clear: both;
+
+    > span {
+      display: block;
+      margin: 13px auto 0;
+      overflow: hidden;
+      text-align: center;
+    }
+
+    span img {
+      margin: 0 auto;
+      text-align: center;
+    }
+  }
+
+  span.align-right {
+    display: block;
+    overflow: hidden;
+    clear: both;
+
+    > span {
+      display: block;
+      margin: 13px 0 0;
+      overflow: hidden;
+      text-align: right;
+    }
+
+    span img {
+      margin: 0;
+      text-align: right;
+    }
+  }
+
+  span.float-left {
+    display: block;
+    float: left;
+    margin-right: 13px;
+    overflow: hidden;
+
+    span {
+      margin: 13px 0 0;
+    }
+  }
+
+  span.float-right {
+    display: block;
+    float: right;
+    margin-left: 13px;
+    overflow: hidden;
+
+    > span {
+      display: block;
+      margin: 13px auto 0;
+      overflow: hidden;
+      text-align: right;
+    }
+  }
+}

resources/scss/primer-css/primer-markdown/lib/lists.scss

@@ -0,0 +1,71 @@
+// Base styles
+// stylelint-disable selector-no-qualifying-type
+.markdown-body {
+
+  // Lists, Blockquotes & Such
+  ul,
+  ol {
+    padding-left: 2em;
+
+    &.no-list {
+      padding: 0;
+      list-style-type: none;
+    }
+  }
+
+  // Did someone complain about list spacing? Encourage them
+  // to create the spacing with their markdown formatting.
+  // List behavior should be controled by the markup, not the css.
+  //
+  // For lists with padding between items, use blank
+  // lines between items. This will generate paragraphs with
+  // padding to space things out.
+  //
+  // - item
+  //
+  // - item
+  //
+  // - item
+  //
+  // For list without padding, don't use blank lines.
+  //
+  // - item
+  // - item
+  // - item
+  //
+  // Modifying the css to emulate these behaviors merely brakes
+  // one case in the process of solving another. Don't change
+  // this unless it's really really a bug.
+  ul ul,
+  ul ol,
+  ol ol,
+  ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  li > p {
+    margin-top: $margin;
+  }
+
+  li + li {
+    margin-top: 0.25em;
+  }
+
+  dl {
+    padding: 0;
+
+    dt {
+      padding: 0;
+      margin-top: $margin;
+      font-size: 1em;
+      font-style: italic;
+      font-weight: bold;
+    }
+
+    dd {
+      padding: 0 $margin;
+      margin-bottom: $margin;
+    }
+  }
+}

resources/scss/primer-css/primer-markdown/lib/markdown-body.scss

@@ -0,0 +1,110 @@
+// All of our block level items should have the same margin
+$margin: 16px;
+
+// This is styling for generic markdownized text. Anything you put in a
+// container with .markdown-body on it should render generally well. It also
+// includes some GitHub Flavored Markdown specific styling (like @mentions)
+.markdown-body {
+  font-family: $body-font;
+  font-size: 16px;
+  line-height: $body-line-height;
+  word-wrap: break-word;
+
+  // Clearfix on the markdown body
+  &::before {
+    display: table;
+    content: "";
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  > *:first-child {
+    margin-top: 0 !important;
+  }
+
+  > *:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  // Anchors like <a name="examples">. These sometimes end up wrapped around
+  // text when users mistakenly forget to close the tag or use self-closing tag
+  // syntax. We don't want them to appear like links.
+  // FIXME: a:not(:link):not(:visited) would be a little clearer here (and
+  // possibly faster to match), but it breaks styling of <a href> elements due
+  // to https://bugs.webkit.org/show_bug.cgi?id=142737.
+  a:not([href]) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  // Link Colors
+  .absent {
+    color: #c00;
+  }
+
+  .anchor {
+    float: left;
+    padding-right: 4px;
+    margin-left: -20px;
+    line-height: 1;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre {
+    margin-top: 0;
+    margin-bottom: $margin;
+  }
+
+  hr {
+    height: 0.25em;
+    padding: 0;
+    margin: ($margin * 1.5) 0;
+    background-color: #e7e7e7;
+    border: 0;
+  }
+
+  blockquote {
+    padding: 0 1em;
+    color: #777;
+    border-left: 0.25em solid #ddd;
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
+  }
+
+  .loweralpha {
+    list-style-type: lower-alpha;
+  }
+}

resources/scss/primer-css/primer-markdown/lib/tables.scss

@@ -0,0 +1,31 @@
+// Needs refactoring
+.markdown-body {
+  // Tables
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    // For Firefox to horizontally scroll wider tables.
+    word-break: normal;
+    word-break: keep-all;
+
+    th {
+      font-weight: bold;
+    }
+
+    th,
+    td {
+      padding: 6px 13px;
+      border: 1px solid #ddd;
+    }
+
+    tr {
+      background-color: #fff;
+      border-top: 1px solid #ccc;
+
+      &:nth-child(2n) {
+        background-color: #f8f8f8;
+      }
+    }
+  }
+}

resources/scss/primer-css/primer-navigation/index.scss

@@ -0,0 +1,7 @@
+@import "../primer-support/index.scss";
+// Navigation
+@import "./lib/counter.scss";
+@import "./lib/menu.scss";
+@import "./lib/tabnav.scss";
+@import "./lib/filter-list.scss";
+@import "./lib/subnav.scss";

resources/scss/primer-css/primer-navigation/lib/counter.scss

@@ -0,0 +1,10 @@
+.counter {
+  display: inline-block;
+  padding: 2px 5px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  line-height: 1;
+  color: #666;
+  background-color: #eee;
+  border-radius: 20px;
+}

resources/scss/primer-css/primer-navigation/lib/filter-list.scss

@@ -0,0 +1,62 @@
+// Filters list
+//
+// A vertical list of filters.
+.filter-list {
+  list-style-type: none;
+
+  &.small .filter-item {
+    padding: 4px 10px;
+    margin: 0 0 2px;
+    font-size: 12px;
+  }
+
+  &.pjax-active .filter-item {
+    color: $text-gray;
+    background-color: transparent;
+
+    &.pjax-active {
+      color: $text-white;
+      background-color: $bg-blue;
+    }
+  }
+}
+
+.filter-item {
+  position: relative;
+  display: block;
+  padding: 8px 10px;
+  margin-bottom: 5px;
+  overflow: hidden;
+  font-size: 14px;
+  color: $text-gray;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: 3px;
+
+  &:hover {
+    text-decoration: none;
+    background-color: #eee;
+  }
+
+  &.selected {
+    color: $text-white;
+    background-color: $bg-blue;
+  }
+
+  .count {
+    float: right;
+    font-weight: bold;
+  }
+
+  .bar {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    bottom: 2px;
+    z-index: -1;
+    display: inline-block;
+    background-color: #f1f1f1;
+  }
+}

resources/scss/primer-css/primer-navigation/lib/menu.scss

@@ -0,0 +1,113 @@
+// Side menu
+//
+// A menu on the side of a page, defaults to left side. e.g. github.com/about
+
+.menu {
+  margin-bottom: 15px;
+  list-style: none;
+  background-color: $bg-white;
+  border: 1px solid #d8d8d8;
+  border-radius: 3px;
+}
+
+.menu-item {
+  position: relative;
+  display: block;
+  padding: 8px 10px;
+  text-shadow: 0 1px 0 #fff;
+  border-bottom: 1px solid #eee;
+
+  &:first-child {
+    border-top: 0;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+
+    &::before { border-top-left-radius: 2px; }
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+
+    &::before { border-bottom-left-radius: 2px; }
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-color: #f9f9f9;
+  }
+
+  &.selected {
+    font-weight: bold;
+    color: #222;
+    cursor: default;
+    background-color: $bg-white;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      content: "";
+      background-color: #d26911;
+    }
+  }
+
+  .octicon {
+    width: 16px;
+    margin-right: 5px;
+    color: $text-gray-dark;
+    text-align: center;
+  }
+
+  .counter {
+    float: right;
+    margin-left: 5px;
+  }
+
+  .menu-warning {
+    float: right;
+    color: #d26911;
+  }
+
+  .avatar {
+    float: left;
+    margin-right: 5px;
+  }
+
+  &.alert {
+    .counter {
+      color: $text-red;
+    }
+  }
+}
+
+.menu-heading {
+  display: block;
+  padding: 8px 10px;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 20px;
+  color: #555;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #eee;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:first-child {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+}

resources/scss/primer-css/primer-navigation/lib/subnav.scss

@@ -0,0 +1,121 @@
+// Needs refactoring
+// Sub nav
+.subnav {
+  margin-bottom: 20px;
+
+  @include clearfix();
+}
+
+.subnav-bordered {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.subnav-flush {
+  margin-bottom: 0;
+}
+
+.subnav-item {
+  position: relative;
+  float: left;
+  padding: 6px 14px;
+  font-weight: $font-weight-bold;
+  line-height: 20px;
+  color: #666;
+  border: 1px solid #e5e5e5;
+
+  + .subnav-item {
+    margin-left: -1px;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: #f5f5f5;
+  }
+
+  &.selected,
+  &.selected:hover,
+  &.selected:focus {
+    z-index: 2;
+    color: #fff;
+    background-color: $bg-blue;
+    border-color: $blue;
+  }
+
+  &:first-child {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  &:last-child {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+}
+
+.subnav-search {
+  position: relative;
+  margin-left: 10px;
+}
+
+.subnav-search-input {
+  width: 320px;
+  padding-left: 30px;
+  color: $text-gray;
+  border-color: #d5d5d5;
+}
+
+.subnav-search-input-wide {
+  width: 500px;
+}
+
+.subnav-search-icon {
+  position: absolute;
+  top: 9px;
+  left: 8px;
+  display: block;
+  color: #ccc;
+  text-align: center;
+  pointer-events: none;
+}
+
+.subnav-search-context {
+  .btn {
+    color: #555;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.selected {
+      z-index: 2;
+    }
+  }
+
+  + .subnav-search {
+    margin-left: -1px;
+
+    .subnav-search-input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .select-menu-modal-holder {
+    z-index: 30;
+  }
+
+  .select-menu-modal {
+    width: 220px;
+  }
+
+  .select-menu-item-icon {
+    color: inherit;
+  }
+}
+
+.subnav-spacer-right {
+  padding-right: 10px;
+}

resources/scss/primer-css/primer-navigation/lib/tabnav.scss

@@ -0,0 +1,72 @@
+// Outer wrapper
+.tabnav {
+  margin-top: 0;
+  margin-bottom: 15px;
+  border-bottom: 1px solid #ddd;
+
+  .counter {
+    margin-left: 5px;
+  }
+}
+
+.tabnav-tabs {
+  margin-bottom: -1px;
+}
+
+.tabnav-tab {
+  display: inline-block;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #666;
+  text-decoration: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-bottom: 0;
+
+  &.selected {
+    color: $text-gray-dark;
+    background-color: $bg-white;
+    border-color: #ddd;
+    border-radius: 3px 3px 0 0;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+// Tabnav extras
+//
+// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+// inline text or links.
+
+.tabnav-extra {
+  display: inline-block;
+  padding-top: 10px;
+  margin-left: 10px;
+  font-size: 12px;
+  color: #666;
+
+  > .octicon {
+    margin-right: 2px;
+  }
+}
+
+// When tabnav-extra are anchors
+// stylelint-disable selector-no-qualifying-type
+a.tabnav-extra:hover {
+  color: $text-blue;
+  text-decoration: none;
+}
+// stylelint-enable selector-no-qualifying-type
+
+// Tabnav buttons
+//
+// For when there are multiple buttons, space them out appropriately. Requires
+// the buttons to be floated or inline-block.
+
+.tabnav-btn {
+  margin-left: 10px;
+}

resources/scss/primer-css/primer-states/index.scss

@@ -0,0 +1,2 @@
+@import "../primer-support/index.scss";
+@import "./lib/states.scss";

resources/scss/primer-css/primer-states/lib/states.scss

@@ -0,0 +1,32 @@
+// A rounded corner box containing a label "open" or "closed"
+// Without a state it is grey.
+//
+// open     - $green background
+// reopened - $green background
+// closed   - $red background
+// merged   - $purple background
+// renamed  - $orange background
+//
+// No styleguide reference
+.state {
+  display: inline-block;
+  padding: 4px 8px;
+  font-weight: $font-weight-bold;
+  line-height: 20px;
+  color: $text-white;
+  text-align: center;
+  background-color: $gray-light;
+  border-radius: 3px;
+}
+
+.state-open,
+.state-proposed,
+.state-reopened {
+  background-color: $bg-green;
+}
+
+.state-merged { background-color: $bg-purple; }
+
+.state-closed { background-color: $bg-red; }
+
+.state-renamed { background-color: $status-renamed; }

resources/scss/primer-css/primer-support/index.scss

@@ -0,0 +1,7 @@
+// variables
+@import "./lib/variables.scss";
+
+// mixins
+@import "./lib/mixins/typography.scss";
+@import "./lib/mixins/layout.scss";
+@import "./lib/mixins/misc.scss";

resources/scss/primer-css/primer-support/lib/mixins/layout.scss

@@ -0,0 +1,52 @@
+// Responsive media queries
+
+@mixin breakpoint($breakpoint) {
+  // Retrieves the value from the key
+  $value: map-get($breakpoints, $breakpoint);
+
+  // If the key exists in the map
+  @if $value != null {
+    // Prints a media query based on the value
+    @media (min-width: $value) {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+      + "Please make sure it is defined in `$breakpoints` map.";
+  }
+}
+
+// Retina media query
+
+@mixin retina-media-query {
+  @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-moz-min-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    @content;
+  }
+}
+
+// Clearfix
+//
+// Clears floats via mixin.
+
+@mixin clearfix {
+  &::before {
+    display: table;
+    content: "";
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}

resources/scss/primer-css/primer-support/lib/mixins/misc.scss

@@ -0,0 +1,29 @@
+// Generate a two-color caret for any element.
+@mixin double-caret($foreground: #fff, $background: #ddd) {
+  &::after,
+  &::before {
+    position: absolute;
+    top: 11px;
+    right: 100%;
+    left: -16px;
+    display: block;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    content: " ";
+    border-color: transparent;
+    border-style: solid solid outset;
+  }
+
+  &::after {
+    margin-top: 1px;
+    margin-left: 2px;
+    border-width: 7px;
+    border-right-color: $foreground;
+  }
+
+  &::before {
+    border-width: 8px;
+    border-right-color: $background;
+  }
+}

resources/scss/primer-css/primer-support/lib/mixins/typography.scss

@@ -0,0 +1,76 @@
+// Text hiding for image based text replacement.
+// Higher performance than -9999px because it only renders
+// the size of the actual text, not a full 9999px box.
+@mixin hide-text() {
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+// Heading mixins for use within components
+// These match heading utilities in utilities/typography
+@mixin h1 {
+  font-size: $h1-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h2 {
+  font-size: $h2-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h3 {
+  font-size: $h3-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h4 {
+  font-size: $h4-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h5 {
+  font-size: $h5-size;
+  font-weight: $font-weight-bold;
+}
+
+@mixin h6 {
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+}
+
+// Responsive heading mixins
+// There are no responsive mixins for h5 and h6 because they are small
+// and don't need to be smaller on mobile.
+@mixin h1-reponsive {
+  font-size: 26px;
+  font-weight: bold;
+
+  // Up to 32px in future
+  @include breakpoint(md) { font-size: 30px; }
+
+}
+
+@mixin h2-responsive {
+  font-size: 20px;
+  font-weight: bold;
+
+  // Up to 22px or 24px in future
+  @include breakpoint(md) { font-size: 21px; }
+}
+
+@mixin h3-responsive {
+  font-size: 14px;
+  font-weight: bold;
+
+  @include breakpoint(md) { font-size: 16px; }
+
+}
+
+@mixin h4-responsive {
+  font-size: 13px;
+  font-weight: bold;
+
+  @include breakpoint(md) { font-size: 14px; }
+
+}

resources/scss/primer-css/primer-support/lib/variables.scss

@@ -0,0 +1,179 @@
+// variables
+// stylelint-disable declaration-bang-space-before
+// These are our margin and padding utility spacers. The default step size we
+// use is 6px. This gives us a key of:
+//    0 => 0px
+//    1 => 3px
+//    2 => 6px
+//    3 => 12px
+//    4 => 24px
+//    5 => 36px
+$spacer: 6px !default;
+$spacers: (
+  0,
+  round($spacer / 2),
+  $spacer,
+  $spacer * 2,
+  $spacer * 4,
+  $spacer * 6,
+  $spacer * 8
+) !default;
+
+// Aliases for easy use
+$spacer-1: nth($spacers, 2) !default; // 3px
+$spacer-2: nth($spacers, 3) !default; // 6px
+$spacer-3: nth($spacers, 4) !default; // 12px
+$spacer-4: nth($spacers, 5) !default; // 24px
+$spacer-5: nth($spacers, 6) !default; // 36px
+$spacer-6: nth($spacers, 7) !default; // 48px
+
+$container-width: 980px !default;
+$grid-gutter:     10px !default;
+
+// breakpoints
+$width-xs: 0;
+$width-sm: 544px;
+$width-md: 768px;
+$width-lg: 1004px;
+$width-xl: 1280px;
+
+// New responsive container-width
+$container-md: $width-md !default;
+$container-lg: $width-lg !default;
+$container-xl: $width-xl !default;
+
+// Breakpoints
+$breakpoints: (
+  // Small screen / phone
+  sm: $width-sm,
+  // Medium screen / tablet
+  md: $width-md,
+  // Large screen / desktop (980 + (12 * 2)) <= container + gutters
+  lg: $width-lg,
+  // Extra large screen / wide desktop
+  xl: $width-xl
+) !default;
+
+// ---- Colors ----
+
+// Brand
+$blue:              #4078c0 !default;
+$gray-dark:         #333    !default;
+$gray-light:        #999    !default;
+$gray:              #767676 !default;
+$green:             #6cc644 !default;
+$orange:            #c9510c !default;
+$purple:            #6e5494 !default;
+$red:               #bd2c00 !default;
+$white:             #fff !default;
+
+// State indicators.
+$status-renamed:    #fffa5d !default;
+$status-pending:    #cea61b !default;
+
+// Repository type colors
+$repo-private-text: #4c4a42 !default;
+$repo-private-bg:   #fff9ea !default;
+$repo-private-icon: #e9dba5 !default;
+
+// Alerts
+$flash-border-blue: #bac6d3 !default;
+$flash-bg-blue: #e2eef9 !default;
+$flash-text-blue: #246 !default;
+
+$flash-border-yellow: #dfd8c2 !default;
+$flash-bg-yellow: #fff9ea !default;
+$flash-text-yellow: #4c4a42 !default;
+
+$flash-border-red: #d2b2b2 !default;
+$flash-bg-red:     #fcdede !default;
+$flash-text-red:   #911 !default;
+
+// Border colors
+$border-blue:       #c5d5dd !default;
+$border-gray-dark:  #ddd !default;
+$border-gray-light: #eee !default;
+$border-gray:       #e5e5e5 !default;
+
+// Background colors
+$bg-blue-light:     #f2f8fa !default;
+$bg-blue:           $blue !default;
+$bg-gray-dark:      $gray-dark !default;
+$bg-gray-light:     #fafafa !default;
+$bg-gray:           #f5f5f5 !default;
+$bg-green:          $green !default;
+$bg-orange:         $orange !default;
+$bg-purple:         $purple !default;
+$bg-red:            $red !default;
+$bg-white:          $white !default;
+
+// Text colors
+$text-blue:         $blue !default;
+$text-gray-dark:    $gray-dark !default;
+$text-gray-light:   $gray-light !default;
+$text-gray:         $gray !default;
+$text-green:        darken($green, 10%) !default;
+$text-orange:       $orange !default;
+$text-purple:       $purple !default;
+$text-red:          $red !default;
+$text-white:        $white !default;
+
+// Border size
+$border-width: 1px !default;
+$border-color: $border-gray !default;
+$border-style: solid !default;
+$border: $border-width $border-color $border-style !default;
+$border-radius: 3px !default;
+
+// Heading sizes
+$h00-size: 48px !default;
+$h0-size: 40px !default;
+$h1-size: 32px !default;
+$h2-size: 24px !default;
+$h3-size: 20px !default;
+$h4-size: 16px !default;
+$h5-size: 14px !default;
+$h6-size: 12px !default;
+
+$font-weight-bold: 600 !default;
+$font-weight-light: 300 !default;
+
+$font-size-small: 12px !default;
+
+$lh-condensed-ultra: 1 !default;
+$lh-condensed: 1.25 !default;
+$lh-default: 1.5 !default;
+
+// Font stacks
+$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Monospace font stack
+$mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+
+// The base body size
+$body-font-size: 14px !default;
+$body-line-height: $lh-default !default;
+
+// Tooltips
+$tooltip-max-width: 250px !default;
+$tooltip-background-color: rgba(0, 0, 0, 0.8) !default;
+$tooltip-text-color: #fff !default;
+$tooltip-delay: 0.4s !default;
+$tooltip-duration: 0.1s !default;
+
+$blob-inner-border: #eee;
+
+$commitBackgroundColor: #f2f9fc;
+
+$conversationListBorderColor: #eee;
+
+$exploregrid-item-border-radius: 4px;
+
+$stats-switcher-py: 10px;
+// Future proof this `height` value by finding the computed line-height, then
+// adding the total value of the vertical padding. This var is used to toggle
+// between the stats bar and language breakdown.
+$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
+
+$min_tab_size: 1;
+$max_tab_size: 12;

resources/scss/primer-css/primer-tooltips/index.scss

@@ -0,0 +1,2 @@
+@import "../primer-support/index.scss";
+@import "./lib/tooltips.scss";

resources/scss/primer-css/primer-tooltips/lib/tooltips.scss

@@ -0,0 +1,281 @@
+.tooltipped {
+  position: relative;
+}
+
+// This is the tooltip bubble
+.tooltipped::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: 5px 8px;
+  font: normal normal 11px/1.5 $body-font;
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: $tooltip-text-color;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: $tooltip-background-color;
+  border-radius: 3px;
+  opacity: 0;
+}
+
+// This is the tooltip arrow
+.tooltipped::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0;
+  height: 0;
+  color: $tooltip-background-color;
+  pointer-events: none;
+  content: "";
+  border: 5px solid transparent;
+  opacity: 0;
+}
+
+// delay animation for tooltip
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// This will indicate when we'll activate the tooltip
+.tooltipped:hover,
+.tooltipped:active,
+.tooltipped:focus {
+  &::before,
+  &::after {
+    display: inline-block;
+    text-decoration: none;
+    animation-name: tooltip-appear;
+    animation-duration: $tooltip-duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+    animation-delay: $tooltip-delay;
+  }
+}
+
+.tooltipped-no-delay:hover,
+.tooltipped-no-delay:active,
+.tooltipped-no-delay:focus {
+  &::before,
+  &::after {
+    opacity: 1;
+    animation: none;
+  }
+}
+
+.tooltipped-multiline:hover,
+.tooltipped-multiline:active,
+.tooltipped-multiline:focus {
+  &::after {
+    display: table-cell;
+  }
+}
+
+// Tooltipped south
+.tooltipped-s,
+.tooltipped-se,
+.tooltipped-sw {
+  &::after {
+    top: 100%;
+    right: 50%;
+    margin-top: 5px;
+  }
+
+  &::before {
+    top: auto;
+    right: 50%;
+    bottom: -5px;
+    margin-right: -5px;
+    border-bottom-color: $tooltip-background-color;
+  }
+}
+
+.tooltipped-se {
+  &::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px;
+  }
+}
+
+.tooltipped-sw::after {
+  margin-right: -15px;
+}
+
+// Tooltips above the object
+.tooltipped-n,
+.tooltipped-ne,
+.tooltipped-nw {
+  &::after {
+    right: 50%;
+    bottom: 100%;
+    margin-bottom: 5px;
+  }
+
+  &::before {
+    top: -5px;
+    right: 50%;
+    bottom: auto;
+    margin-right: -5px;
+    border-top-color: $tooltip-background-color;
+  }
+}
+
+.tooltipped-ne {
+  &::after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px;
+  }
+}
+
+.tooltipped-nw::after {
+  margin-right: -15px;
+}
+
+// Move the tooltip body to the center of the object.
+.tooltipped-s::after,
+.tooltipped-n::after {
+  transform: translateX(50%);
+}
+
+// Tooltipped to the left
+.tooltipped-w {
+  &::after {
+    right: 100%;
+    bottom: 50%;
+    margin-right: 5px;
+    transform: translateY(50%);
+  }
+
+  &::before {
+    top: 50%;
+    bottom: 50%;
+    left: -5px;
+    margin-top: -5px;
+    border-left-color: $tooltip-background-color;
+  }
+}
+
+// tooltipped to the right
+.tooltipped-e {
+  &::after {
+    bottom: 50%;
+    left: 100%;
+    margin-left: 5px;
+    transform: translateY(50%);
+  }
+
+  &::before {
+    top: 50%;
+    right: -5px;
+    bottom: 50%;
+    margin-top: -5px;
+    border-right-color: $tooltip-background-color;
+  }
+}
+
+// Multiline tooltips
+//
+// `.tooltipped-multiline` Add this class when you have long content.
+// The downside is you cannot preformat the text with newlines and `[w,e]`
+// are always `$tooltip-max-width` wide.
+.tooltipped-multiline {
+  &::after {
+    width: max-content;
+    max-width: $tooltip-max-width;
+    word-break: break-word;
+    word-wrap: normal;
+    white-space: pre-line;
+    border-collapse: separate;
+  }
+
+  &.tooltipped-s::after,
+  &.tooltipped-n::after {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.tooltipped-w::after,
+  &.tooltipped-e::after {
+    right: 100%;
+  }
+}
+
+@media screen and (min-width: 0\0) {
+  // IE11
+  .tooltipped-multiline::after {
+    width: $tooltip-max-width;
+  }
+}
+
+// Sticky tooltips
+//
+// Always show the tooltip.
+.tooltipped-sticky {
+  &::before,
+  &::after {
+    display: inline-block;
+  }
+
+  &.tooltipped-multiline {
+    &::after {
+      display: table-cell;
+    }
+  }
+}
+
+// Alert tooltips
+//
+// Colors for different alert states.
+@mixin colorizeTooltip($text-color, $background-color) {
+  &::after {
+    color: $text-color;
+    background: $background-color;
+  }
+
+  .tooltipped-s,
+  .tooltipped-se,
+  .tooltipped-sw {
+    &::before {
+      border-bottom-color: $background-color;
+    }
+  }
+
+  &.tooltipped-n,
+  &.tooltipped-ne,
+  &.tooltipped-nw {
+    &::before {
+      border-top-color: $background-color;
+    }
+  }
+
+  &.tooltipped-e::before {
+    border-right-color: $background-color;
+  }
+
+  &.tooltipped-w::before {
+    border-left-color: $background-color;
+  }
+}
+
+@include retina-media-query {
+  .tooltipped-w::after {
+    // weird bug on retina
+    margin-right: 4.5px;
+  }
+}

resources/scss/primer-css/primer-truncate/index.scss

@@ -0,0 +1 @@
+@import "./lib/truncate.scss";

resources/scss/primer-css/primer-truncate/lib/truncate.scss

@@ -0,0 +1,27 @@
+// Truncate
+//
+// css-truncate will shorten text with an ellipsis.
+
+.css-truncate {
+  // Truncate double target
+  //
+  // css-truncate will shorten text with an ellipsis. The maximum width
+  // of the truncated text can be changed by overriding the max-width
+  // of the .css-truncate-target
+  &.css-truncate-target,
+  .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+
+  &.expandable.zeroclipboard-is-hover .css-truncate-target,
+  &.expandable.zeroclipboard-is-hover.css-truncate-target,
+  &.expandable:hover .css-truncate-target,
+  &.expandable:hover.css-truncate-target {
+    max-width: 10000px !important;
+  }
+}

resources/scss/primer-css/primer-utilities/index.scss

@@ -0,0 +1,9 @@
+@import "../primer-support/index.scss";
+// utilities
+@import "./lib/animations.scss";
+@import "./lib/border.scss";
+@import "./lib/colors.scss";
+@import "./lib/layout.scss";
+@import "./lib/margin.scss";
+@import "./lib/padding.scss";
+@import "./lib/typography.scss";

resources/scss/primer-css/primer-utilities/lib/animations.scss

@@ -0,0 +1,156 @@
+// This file contains reusable animations for github.
+
+// Fade in
+// A class to fade in an element on the page.
+.anim-fade-in {
+  animation-name: fade-in;
+  animation-duration: 1s;
+  animation-timing-function: ease-in-out;
+
+  &.fast {
+    animation-duration: 300ms;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// Fade up
+// A class that will fade in and slide up an element
+.anim-fade-up {
+  opacity: 0;
+  animation-name: fade-up;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+  animation-delay: 1s;
+}
+
+@keyframes fade-up {
+  0% {
+    opacity: 0.8;
+    transform: translateY(100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Fade down
+// A class that will fade an element out and slide down.
+.anim-fade-down {
+  animation-name: fade-down;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in;
+}
+
+@keyframes fade-down {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0.5;
+    transform: translateY(100%);
+  }
+}
+
+// Grow X
+// A class that will grow an element width from 0 to 100%
+.anim-grow-x {
+  width: 0%;
+  animation-name: grow-x;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+  animation-delay: 0.5s;
+}
+
+@keyframes grow-x {
+  to { width: 100%; }
+}
+
+// Shrink X
+// A class that will shrink an element from 100% to 0%
+.anim-shrink-x {
+  animation-name: shrink-x;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0.5s;
+}
+
+@keyframes shrink-x {
+  to { width: 0%; }
+}
+
+// Scale in
+// A class to fade in an element and scale it fast
+.anim-scale-in {
+  animation-name: scale-in;
+  animation-duration: 0.15s;
+  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+}
+
+@keyframes scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.anim-pulse {
+  animation-name: pulse;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.3;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.3;
+  }
+}
+
+.anim-pulse-in {
+  animation-name: pulse-in;
+  animation-duration: 0.5s;
+}
+
+@keyframes pulse-in {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}

resources/scss/primer-css/primer-utilities/lib/border.scss

@@ -0,0 +1,29 @@
+// Border utilities
+// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
+.border        { border: $border !important; }
+.border-top    { border-top: $border !important; }
+.border-right  { border-right: $border !important; }
+.border-bottom { border-bottom: $border !important; }
+.border-left   { border-left: $border !important; }
+
+.border-y {
+  border-top: $border !important;
+  border-bottom: $border !important;
+}
+
+// Border colors
+.border-blue       { border-color: $border-blue !important; }
+.border-gray-light { border-color: $border-gray-light !important; }
+.border-gray-dark  { border-color: $border-gray-dark !important; }
+
+// Without borders
+.border-0        { border: 0 !important; }
+.border-top-0    { border-top: 0 !important; }
+.border-right-0  { border-right: 0 !important; }
+.border-bottom-0 { border-bottom: 0 !important; }
+.border-left-0   { border-left: 0 !important; }
+
+// Rounded corners
+.rounded-0 { border-radius: 0 !important; }
+.rounded-1 { border-radius: $border-radius !important; }
+.rounded-2 { border-radius: $border-radius * 2 !important; }

resources/scss/primer-css/primer-utilities/lib/colors.scss

@@ -0,0 +1,45 @@
+// Color utilities
+// stylelint-disable block-opening-brace-space-before, block-closing-brace-newline-before, block-opening-brace-newline-after, selector-list-comma-newline-after, block-opening-brace-space-after, primer/selector-no-utility, rule-non-nested-empty-line-before
+
+// background colors
+.bg-white      { background-color: $bg-white !important; }
+.bg-blue       { background-color: $bg-blue !important; }
+.bg-blue-light { background-color: $bg-blue-light !important; }
+.bg-gray-dark  { background-color: $bg-gray-dark !important; }
+.bg-gray       { background-color: $bg-gray !important; }
+.bg-gray-light { background-color: $bg-gray-light !important; }
+.bg-green      { background-color: $bg-green !important; }
+.bg-red        { background-color: $bg-red !important; }
+
+// text colors
+.text-blue          { color: $text-blue !important; }
+.text-red           { color: $text-red !important; }
+.text-gray-light    { color: $text-gray-light !important; }
+.text-gray          { color: $text-gray !important; }
+.text-gray-dark     { color: $text-gray-dark !important; }
+.text-green         { color: $text-green !important; }
+.text-orange        { color: $text-orange !important; }
+.text-purple        { color: $text-purple !important; }
+.text-white         { color: $text-white !important; }
+.text-inherit       { color: inherit !important; }
+
+// link colors
+.link-blue      { color: $text-blue !important; }
+.link-gray-dark { color: $text-gray-dark !important; }
+.link-gray      { color: $text-gray !important; }
+
+// Text states
+.text-renamed { color: $status-renamed !important; }
+.text-pending { color: $status-pending !important; }
+
+// Muted link
+//
+// Have a link you need to be gray to start, and blue on hover? Use this.
+.muted-link {
+  color: $text-gray !important;
+
+  &:hover {
+    color: $text-blue !important;
+    text-decoration: none;
+  }
+}

resources/scss/primer-css/primer-utilities/lib/layout.scss

@@ -0,0 +1,109 @@
+// Layout
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
+// stylelint-disable block-closing-brace-newline-before, block-opening-brace-newline-after
+// stylelint-disable rule-non-nested-empty-line-before
+
+// position utilites
+.position-static   { position: static !important; }
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed    { position: fixed !important; }
+
+.top-0    { top: 0 !important; }
+.right-0  { right: 0 !important; }
+.bottom-0 { bottom: 0 !important; }
+.left-0   { left: 0 !important; }
+
+// Vertical alignment
+.v-align-middle      { vertical-align: middle !important; }
+.v-align-top         { vertical-align: top !important; }
+.v-align-bottom      { vertical-align: bottom !important; }
+.v-align-text-top    { vertical-align: text-top !important; }
+.v-align-text-bottom { vertical-align: text-bottom !important; }
+
+// Overflow utilities
+// overflow-hidden can also be used to create a new
+// block formatting context or clear floats.
+.overflow-hidden { overflow: hidden !important; }
+.overflow-scroll { overflow: scroll !important; }
+.overflow-auto   { overflow: auto !important; }
+
+// Clear floats
+.clearfix {
+  @include clearfix;
+}
+
+// Floats
+.float-right { float: right !important; }
+.float-left { float: left !important; }
+
+// Responsive float utlities
+// .float-md-left, .float-lg-right, ...
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .float-#{$breakpoint}-left  { float: left !important; }
+    .float-#{$breakpoint}-right  { float: right !important; }
+  }
+}
+
+// Width and height utilities, helpful in combination
+// with display-table utilities and images
+.width-fit   { max-width: 100% !important; }
+.width-full  { width: 100% !important; }
+.height-full { height: 100% !important; }
+
+// Remove min-width from element
+.min-width-0 { min-width: 0 !important; }
+
+// Visibility utilities
+.v-hidden { visibility: hidden !important; }
+.v-visible { visibility: visible !important; }
+
+// Display utilites
+.d-table      { display: table !important; }
+.d-table-cell { display: table-cell !important; }
+.table-fixed { table-layout: fixed !important; }
+
+.d-block        { display: block !important; }
+.d-inline       { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-none         { display: none !important; }
+
+// Responsive display utlities
+// .d-sm-none, .d-lg-inline, ...
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .d-#{$breakpoint}-table      { display: table !important; }
+    .d-#{$breakpoint}-table-cell { display: table-cell !important; }
+    .d-#{$breakpoint}-block  { display: block !important; }
+    .d-#{$breakpoint}-inline  { display: inline !important; }
+    .d-#{$breakpoint}-inline-block  { display: inline-block !important; }
+    .d-#{$breakpoint}-none  { display: none !important; }
+  }
+}
+
+// Hide utilities for each breakpoint
+// Each hide utility only applies to one breakpoint range.
+@media (max-width: $width-sm) {
+  .hide-sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: $width-sm) and (max-width: $width-md) {
+  .hide-md {
+    display: none !important;
+  }
+}
+
+@media (min-width: $width-md) and (max-width: $width-lg) {
+  .hide-lg {
+    display: none !important;
+  }
+}
+
+@media (min-width: $width-lg) {
+  .hide-xl {
+    display: none !important;
+  }
+}

resources/scss/primer-css/primer-utilities/lib/margin.scss

@@ -0,0 +1,58 @@
+// Margin spacer utilities
+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
+@for $i from 1 through length($spacers) {
+  $size: #{nth($spacers, $i)};
+  $scale: #{$i - 1};
+
+  // .m-0, .m-1, .m-2...
+  .m-#{$scale}  { margin       : #{$size} !important; }
+  .mt-#{$scale} { margin-top   : #{$size} !important; }
+  .mr-#{$scale} { margin-right : #{$size} !important; }
+  .mb-#{$scale} { margin-bottom: #{$size} !important; }
+  .ml-#{$scale} { margin-left  : #{$size} !important; }
+
+  .mx-#{$scale} {
+    margin-right: #{$size} !important;
+    margin-left : #{$size} !important;
+  }
+
+  .my-#{$scale} {
+    margin-top   : #{$size} !important;
+    margin-bottom: #{$size} !important;
+  }
+}
+
+// Loop through the breakpoint values
+@each $breakpoint in map-keys($breakpoints) {
+
+  // Loop through the spacer values
+  @for $i from 1 through length($spacers) {
+    @include breakpoint($breakpoint) {
+      $size: #{nth($spacers, $i)}; // sm, md, lg, xl
+      $scale: #{$i - 1};  // 0, 1, 2, 3, 4, 5, 6
+
+      // .m-sm-0, .m-md-1, .m-lg-2...
+      .m-#{$breakpoint}-#{$scale}  { margin: #{$size} !important; }
+      .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
+      .mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
+      .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
+      .ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
+
+      .mx-#{$breakpoint}-#{$scale} {
+        margin-right: #{$size} !important;
+        margin-left: #{$size} !important;
+      }
+
+      .my-#{$breakpoint}-#{$scale} {
+        margin-top: #{$size} !important;
+        margin-bottom: #{$size} !important;
+      }
+    }
+  }
+}
+
+// Auto
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}

resources/scss/primer-css/primer-utilities/lib/padding.scss

@@ -0,0 +1,54 @@
+// Padding spacer utilities
+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
+@for $i from 1 through length($spacers) {
+  $size: #{nth($spacers, $i)};
+  $scale: #{$i - 1};
+
+  // .p-0, .p-1, .p-2...
+  .p-#{$scale}   { padding       : #{$size} !important; }
+  .pt-#{$scale}  { padding-top   : #{$size} !important; }
+  .pr-#{$scale}  { padding-right : #{$size} !important; }
+  .pb-#{$scale}  { padding-bottom: #{$size} !important; }
+  .pl-#{$scale}  { padding-left  : #{$size} !important; }
+
+  .px-#{$scale} {
+    padding-right: #{$size} !important;
+    padding-left: #{$size} !important;
+  }
+
+  .py-#{$scale} {
+    padding-top: #{$size} !important;
+    padding-bottom: #{$size} !important;
+  }
+}
+
+// Responsive padding spacer utilities
+
+// Loop through the breakpoint values
+@each $breakpoint in map-keys($breakpoints) {
+
+  // Loop through the spacer values
+  @for $i from 1 through length($spacers) {
+    @include breakpoint($breakpoint) {
+      $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
+      $scale: #{$i - 1};  // 0, 1, 2, 3, 4, 5, 6
+
+      // .p-sm-0, .p-md-1, .p-lg-2...
+      .p-#{$breakpoint}-#{$scale}  { padding: #{$size} !important; }
+      .pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
+      .pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
+      .pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
+      .pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
+
+      .px-#{$breakpoint}-#{$scale} {
+        padding-right: #{$size} !important;
+        padding-left: #{$size} !important;
+      }
+
+      .py-#{$breakpoint}-#{$scale} {
+        padding-top: #{$size} !important;
+        padding-bottom: #{$size} !important;
+      }
+    }
+  }
+}

resources/scss/primer-css/primer-utilities/lib/typography.scss

@@ -0,0 +1,155 @@
+// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after, declaration-block-semicolon-newline-after, declaration-block-single-line-max-declarations
+// Type scale variables found in primer-support/lib/variables.scss
+// $h00-size: 48px;
+// $h0-size: 40px;
+// $h1-size: 32px;
+// $h2-size: 24px;
+// $h3-size: 20px;
+// $h4-size: 16px;
+// $h5-size: 14px;
+// $h6-size: 12px;
+
+// Heading utilities
+.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; }
+
+.h1 {
+  font-size: 26px !important;
+
+  @include breakpoint(md) { font-size: $h1-size !important; }
+
+}
+
+.h2 {
+  font-size: 22px !important;
+
+  @include breakpoint(md) { font-size: $h2-size !important; }
+}
+
+.h3 {
+  font-size: 18px !important;
+
+  @include breakpoint(md) { font-size: $h3-size !important; }
+
+}
+
+.h4 {
+  font-size: 16px !important;
+
+  @include breakpoint(md) { font-size: $h4-size !important; }
+
+}
+
+.h5 { font-size: $h5-size !important; }
+
+// Does not include color property like typography base
+// styles, color should be applied with color utilities.
+.h6 { font-size: $h6-size !important; }
+
+// Type utilities that match type sale
+.f1 {
+  font-size: 26px !important;
+
+  @include breakpoint(md) { font-size: $h1-size !important; }
+
+}
+
+.f2 {
+  font-size: 22px !important;
+
+  @include breakpoint(md) { font-size: $h2-size !important; }
+}
+
+.f3 {
+  font-size: 18px !important;
+
+  @include breakpoint(md) { font-size: $h3-size !important; }
+
+}
+
+.f4 {
+  font-size: 16px !important;
+
+  @include breakpoint(md) { font-size: $h4-size !important; }
+
+}
+
+.f5 { font-size: $h5-size !important; }
+.f6 { font-size: $h6-size !important; }
+
+// Type utils with light weight that match type scale
+.f00-light {
+  font-size: 40px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h00-size !important; }
+
+}
+
+.f0-light {
+  font-size: 32px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h0-size !important; }
+
+}
+
+.f1-light {
+  font-size: 26px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h1-size !important; }
+
+}
+
+.f2-light {
+  font-size: 22px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h2-size !important; }
+
+}
+// Same size and weight as .lead but without color property
+.f3-light {
+  font-size: 18px !important;
+  font-weight: $font-weight-light !important;
+
+  @include breakpoint(md) { font-size: $h3-size !important; }
+
+}
+
+// Smallest text size
+.text-small { font-size: $h6-size !important; } // 12px
+
+// Large leading paragraphs
+.lead {
+  margin-bottom: 30px;
+  font-size: $h3-size;
+  font-weight: $font-weight-light;
+  color: #555;
+}
+
+// Line-height variations
+// Close to commonly used line-heights. Most line-heights
+// combined with type size equate to whole pixels.
+// Will be improved with future typography scale updates.
+.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
+.lh-condensed { line-height: $lh-condensed !important; }
+.lh-default { line-height: $lh-default !important; }
+
+// Text alignments
+.text-right { text-align: right !important; }
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important; }
+
+// Text styles
+.text-normal { font-weight: normal !important; }
+.text-bold { font-weight: $font-weight-bold !important;}
+.text-italic { font-style: italic !important;}
+.text-uppercase { text-transform: uppercase !important; }
+.no-underline { text-decoration: none !important; }
+.no-wrap { white-space: nowrap !important;}
+
+.text-emphasized {
+  font-weight: $font-weight-bold;
+  color: $text-gray-dark;
+}