5 files changed, 411 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/buttons/README.md b/assets/sass/@primer/css/buttons/README.md
new file mode 100644
index 0000000..3489e3a
--- /dev/null
+++ b/assets/sass/@primer/css/buttons/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "buttons"
+generated: true
+---
+
+# Primer CSS: `buttons` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/buttons/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/buttons.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/buttons/button-group.scss b/assets/sass/@primer/css/buttons/button-group.scss
new file mode 100644
index 0000000..429fad9
--- /dev/null
+++ b/assets/sass/@primer/css/buttons/button-group.scss
@@ -0,0 +1,91 @@
+// 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.
+
+.BtnGroup {
+  display: inline-block;
+  vertical-align: middle;
+  @include clearfix();
+
+  // Proper spacing for multiple button groups (a la, gollum editor)
+  + .BtnGroup,
+  + .btn {
+    margin-left: $spacer-1;
+  }
+}
+
+.BtnGroup-item {
+  position: relative;
+  float: left;
+  border-right-width: 0;
+  border-radius: 0;
+
+  &:first-child {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  &.selected,
+  &[aria-selected=true],
+  &:focus,
+  &:active,
+  &:hover {
+    border-right-width: $border-width;
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+.BtnGroup-parent {
+  float: left;
+
+  &:first-child .BtnGroup-item {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child .BtnGroup-item {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  .BtnGroup-item {
+    border-right-width: 0;
+    border-radius: 0;
+  }
+
+  &.selected,
+  &[aria-selected=true],
+  &:focus,
+  &:active,
+  &:hover {
+    .BtnGroup-item {
+      border-right-width: $border-width;
+    }
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+// ensure that the focus ring sits above the adjacent buttons
+.BtnGroup-item,
+.BtnGroup-parent {
+  &:focus,
+  &:active {
+    z-index: 1;
+  }
+}
diff --git a/assets/sass/@primer/css/buttons/button.scss b/assets/sass/@primer/css/buttons/button.scss
new file mode 100644
index 0000000..5bdd90a
--- /dev/null
+++ b/assets/sass/@primer/css/buttons/button.scss
@@ -0,0 +1,201 @@
+// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors
+
+// Base button styles
+.btn {
+  position: relative;
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 6px 12px;
+  font-size: $body-font-size;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px; // Specifically not inherit our `<body>` default
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-repeat: repeat-x;
+  background-position: -1px -1px;
+  background-size: 110% 110%;
+  border: $border-width $border-style $border-color-button;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 0.25em;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+
+  i {
+    font-style: normal;
+    font-weight: $font-weight-semibold;
+    opacity: 0.75;
+  }
+
+  .octicon {
+    vertical-align: text-top;
+  }
+
+  // Darken for just a tad more contrast against the button background
+  .Counter {
+    color: $text-gray;
+    text-shadow: none;
+    // stylelint-disable-next-line primer/colors
+    background-color: rgba($black, 0.1);
+  }
+
+  &:hover {
+    text-decoration: none;
+    background-repeat: repeat-x;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled=true] {
+    cursor: default;
+    // Repeat `background-position` because `:hover`
+    background-position: 0 0;
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected=true] {
+    background-image: none;
+  }
+}
+
+.btn         { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
+.btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
+.btn-blue    { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
+.btn-danger  { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }
+
+// Outline button
+//
+// For when we need a linky-action that's not too heavy in busier
+// areas like conversation timelines.
+.btn-outline {
+  @include btn-outline($text-blue);
+}
+
+// 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 {
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 10px;
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+}
+
+// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
+.btn-large {
+  padding: $em-spacer-6 1.25em;
+  font-size: inherit;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 6px;
+}
+
+// Full-width button
+//
+// These buttons expand to the full width of their parent container
+.btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+// Link-like buttons
+//
+// This class is for styling <button> and <input> elements to look like links
+.btn-link {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  color: $text-blue;
+  text-decoration: none;
+  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 {
+    text-decoration: underline;
+  }
+
+  &:disabled,
+  &[aria-disabled=true] {
+    &,
+    &:hover {
+      // stylelint-disable-next-line primer/colors
+      color: rgba($gray-600, 0.5);
+      cursor: default;
+    }
+  }
+}
+
+// Invisible button
+//
+// Typically used as a "cancel" button next to a .btn
+.btn-invisible {
+  color: $text-blue;
+  background-color: $bg-white; // Reset default gradient backgrounds and colors
+  background-image: none;
+  border: 0;
+
+  &:hover,
+  &:active,
+  &:focus,
+  &.selected,
+  &[aria-selected=true],
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: $text-blue;
+    background: none;
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+// Octicon button
+//
+// Icon-only buttons
+.btn-octicon {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 5px;
+  line-height: $lh-condensed-ultra;
+  color: $text-gray;
+  vertical-align: middle;
+
+  // For `<button>` elements
+  background: transparent;
+  border: 0;
+
+  &:hover { color: $text-blue; }
+
+  &.disabled,
+  &[aria-disabled=true] {
+    // stylelint-disable-next-line primer/colors
+    color: $gray-400;
+    cursor: default;
+
+    // stylelint-disable-next-line primer/colors
+    &:hover { color: $gray-400; }
+  }
+}
+
+.btn-octicon-danger:hover {
+  color: $text-red;
+}
diff --git a/assets/sass/@primer/css/buttons/index.scss b/assets/sass/@primer/css/buttons/index.scss
new file mode 100644
index 0000000..fcb71f3
--- /dev/null
+++ b/assets/sass/@primer/css/buttons/index.scss
@@ -0,0 +1,4 @@
+@import "../support/index.scss";
+@import "./button.scss";
+@import "./button-group.scss";
+@import "./misc.scss";
diff --git a/assets/sass/@primer/css/buttons/misc.scss b/assets/sass/@primer/css/buttons/misc.scss
new file mode 100644
index 0000000..dcf6f7b
--- /dev/null
+++ b/assets/sass/@primer/css/buttons/misc.scss
@@ -0,0 +1,90 @@
+// stylelint-disable selector-max-type
+
+// Close button
+//
+// Typically used with an octicon-x
+.close-button {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+
+// Hidden text button
+//
+// Use `.hidden-text-expander` to indicate and expand hidden text.
+.hidden-text-expander {
+  display: block;
+
+  &.inline {
+    position: relative;
+    top: -1px;
+    display: inline-block;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 5px;
+    line-height: 0;
+  }
+}
+
+.hidden-text-expander a,
+.ellipsis-expander {
+  display: inline-block;
+  height: 12px;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 5px 5px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 6px;
+  // stylelint-disable-next-line primer/colors
+  color: $gray-700;
+  text-decoration: none;
+  vertical-align: middle;
+  // stylelint-disable-next-line primer/colors
+  background: lighten($gray-300, 5%);
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 1px;
+
+  &:hover {
+    text-decoration: none;
+    // stylelint-disable-next-line primer/colors
+    background-color: darken($gray-300, 4%);
+  }
+
+  &:active {
+    color: $text-white;
+    // stylelint-disable-next-line primer/colors
+    background-color: $blue-400;
+  }
+}
+
+// Social count bubble
+//
+// A container that is used for social bubbles counts.
+.social-count {
+  float: left;
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 10px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: $text-gray-dark;
+  vertical-align: middle;
+  background-color: $bg-white;
+  border: $border-width $border-style $border-color-button;
+  border-left: 0;
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+
+  &:hover,
+  &:active {
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: $text-blue;
+    cursor: pointer;
+  }
+}