6 files changed, 272 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/avatars/README.md b/assets/sass/@primer/css/avatars/README.md
new file mode 100644
index 0000000..8fa16ff
--- /dev/null
+++ b/assets/sass/@primer/css/avatars/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "avatars"
+generated: true
+---
+
+# Primer CSS: `avatars` 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/avatars/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/avatars.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/avatars/avatar-parent-child.scss b/assets/sass/@primer/css/avatars/avatar-parent-child.scss
new file mode 100644
index 0000000..c2260a4
--- /dev/null
+++ b/assets/sass/@primer/css/avatars/avatar-parent-child.scss
@@ -0,0 +1,18 @@
+// .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
+  // stylelint-disable-next-line primer/borders
+  border-radius: 2px;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: -2px -2px 0 rgba($white, 0.8);
+}
diff --git a/assets/sass/@primer/css/avatars/avatar-stack.scss b/assets/sass/@primer/css/avatars/avatar-stack.scss
new file mode 100644
index 0000000..9d0247a
--- /dev/null
+++ b/assets/sass/@primer/css/avatars/avatar-stack.scss
@@ -0,0 +1,145 @@
+// Stacked avatars can be used to show who is participating in thread when
+// there is limited space available.
+
+.AvatarStack {
+  position: relative;
+  min-width: 26px;
+  height: 20px;
+
+  .AvatarStack-body {
+    position: absolute;
+  }
+
+  &.AvatarStack--two {
+    min-width: 36px;
+  }
+
+  &.AvatarStack--three-plus {
+    min-width: 46px;
+  }
+}
+
+.AvatarStack-body {
+  display: flex;
+  background: $bg-white;
+
+  .avatar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    box-sizing: content-box;
+    // stylelint-disable-next-line primer/spacing
+    margin-right: -11px;
+    background-color: $bg-white;
+    border-right: $border-width $border-style $border-white;
+    // stylelint-disable-next-line primer/borders
+    border-radius: 2px;
+    transition: margin 0.1s ease-in-out;
+
+    &:first-child {
+      z-index: 3;
+    }
+
+    &:last-child {
+      z-index: 1;
+      border-right: 0;
+    }
+
+    // stylelint-disable selector-max-type
+    img {
+      // stylelint-disable-next-line primer/borders
+      border-radius: 2px;
+    }
+    // stylelint-enable selector-max-type
+
+    // Account for 4+ avatars
+    &:nth-child(n+4) {
+      display: none;
+      opacity: 0;
+    }
+  }
+
+  &:hover {
+    .avatar {
+      // stylelint-disable-next-line primer/spacing
+      margin-right: 3px;
+    }
+
+    .avatar:nth-child(n+4) {
+      display: flex;
+      opacity: 1;
+    }
+
+    .avatar-more {
+      display: none !important;
+    }
+  }
+}
+
+.avatar.avatar-more {
+  z-index: 1;
+  margin-right: 0;
+  background: $bg-gray;
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    height: 20px;
+    content: "";
+    // stylelint-disable-next-line primer/borders
+    border-radius: 2px;
+    outline: $border-width $border-style $white;
+  }
+
+  &::before {
+    width: 17px;
+    // stylelint-disable-next-line primer/colors
+    background: $gray-200;
+  }
+
+  &::after {
+    width: 14px;
+    // stylelint-disable-next-line primer/colors
+    background: $gray-300;
+  }
+}
+
+// Right aligned variation
+
+.AvatarStack--right {
+  .AvatarStack-body {
+    right: 0;
+    flex-direction: row-reverse;
+
+    &:hover .avatar {
+      margin-right: 0;
+      // stylelint-disable-next-line primer/spacing
+      margin-left: 3px;
+    }
+  }
+
+  .avatar.avatar-more {
+    // stylelint-disable-next-line primer/colors
+    background: $gray-300;
+
+    &::before {
+      width: 5px;
+    }
+
+    &::after {
+      width: 2px;
+      background: $bg-gray;
+    }
+  }
+
+  .avatar {
+    margin-right: 0;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: -11px;
+    border-right: 0;
+    border-left: $border-width $border-style $border-white;
+  }
+}
diff --git a/assets/sass/@primer/css/avatars/avatar.scss b/assets/sass/@primer/css/avatars/avatar.scss
new file mode 100644
index 0000000..a58c5a4
--- /dev/null
+++ b/assets/sass/@primer/css/avatars/avatar.scss
@@ -0,0 +1,22 @@
+.avatar {
+  display: inline-block;
+  overflow: hidden; // Ensure page layout in Firefox should images fail to load
+  line-height: $lh-condensed-ultra;
+  vertical-align: middle;
+  border-radius: $border-radius;
+}
+
+// stylelint-disable-next-line primer/borders
+.avatar-small { border-radius: 2px; }
+
+.avatar-link {
+  float: left;
+  line-height: $lh-condensed-ultra;
+}
+
+// User for example on /stars and /user for grids of avatars
+.avatar-group-item {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: 3px;
+}
diff --git a/assets/sass/@primer/css/avatars/circle-badge.scss b/assets/sass/@primer/css/avatars/circle-badge.scss
new file mode 100644
index 0000000..8553b3f
--- /dev/null
+++ b/assets/sass/@primer/css/avatars/circle-badge.scss
@@ -0,0 +1,55 @@
+// Circle badge icon with drop shadow for icons and logos
+
+.CircleBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $bg-white;
+  border-radius: 50%;
+  box-shadow: $box-shadow-medium;
+}
+
+.CircleBadge-icon {
+  max-width: 60% !important;
+  height: auto !important;
+  max-height: 55% !important;
+}
+
+// Small badge
+.CircleBadge--small {
+  width: 56px;
+  height: 56px;
+}
+
+// Medium badge
+.CircleBadge--medium {
+  width: 96px;
+  height: 96px;
+}
+
+// Large badge
+.CircleBadge--large {
+  width: 128px;
+  height: 128px;
+}
+
+// Dashed line that connects badges..
+// Wrap around 2 or more badges to create a horizonal line:
+
+.DashedConnection {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: "";
+    // stylelint-disable-next-line primer/borders
+    border-bottom: 2px dashed $border-gray;
+  }
+
+  .CircleBadge {
+    position: relative;
+  }
+}
diff --git a/assets/sass/@primer/css/avatars/index.scss b/assets/sass/@primer/css/avatars/index.scss
new file mode 100644
index 0000000..f5dfa93
--- /dev/null
+++ b/assets/sass/@primer/css/avatars/index.scss
@@ -0,0 +1,7 @@
+@import "../support/index.scss";
+
+// Avatars
+@import "./avatar.scss";
+@import "./avatar-parent-child.scss";
+@import "./avatar-stack.scss";
+@import "./circle-badge.scss";