v2 original port

13 files changed, 0 insertions, 1072 deletions

diff --git a/assets/sass/@primer/css/utilities/README.md b/assets/sass/@primer/css/utilities/README.md
deleted file mode 100644
index 95eade2..0000000
--- a/assets/sass/@primer/css/utilities/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-bundle: "utilities"
-generated: true
----
-
-# Primer CSS: `utilities` 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/utilities/index.scss";
-```
-
-## Build
-
-The `@primer/css` npm package includes a standalone CSS build of this module in `dist/utilities.css`.
-
-## License
-
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
-
-
-[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/utilities/animations.scss b/assets/sass/@primer/css/utilities/animations.scss
deleted file mode 100644
index bb1422e..0000000
--- a/assets/sass/@primer/css/utilities/animations.scss
+++ /dev/null
@@ -1,183 +0,0 @@
-// This file contains reusable animations for github.
-
-/* Fade in an element */
-.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 out an element */
-.anim-fade-out {
-  animation-name: fade-out;
-  animation-duration: 1s;
-  animation-timing-function: ease-out;
-
-  &.fast {
-    animation-duration: 0.3s;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-/* 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 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 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 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%; }
-}
-
-/* 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);
-  }
-}
-
-/* Pulse an element's opacity */
-.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;
-  }
-}
-
-/* Pulse in an element */
-.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);
-  }
-}
-
-/* Increase scale of an element on hover */
-.hover-grow {
-  transition: transform 0.3s;
-  backface-visibility: hidden;
-
-  &:hover {
-    transform: scale(1.025);
-  }
-}
diff --git a/assets/sass/@primer/css/utilities/borders.scss b/assets/sass/@primer/css/utilities/borders.scss
deleted file mode 100644
index d3df5ae..0000000
--- a/assets/sass/@primer/css/utilities/borders.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-// Core border utilities
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
-
-/* Add a gray border to the left and right */
-.border-x {
-  border-right: $border !important;
-  border-left: $border !important;
-}
-
-/* Add a gray border to the top and bottom */
-.border-y {
-  border-top: $border !important;
-  border-bottom: $border !important;
-}
-
-/* Responsive gray borders */
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    /* Add a gray border on all sides at/above this breakpoint */
-    .border#{$variant}        { border: $border !important; }
-    /* Set the border width to 0 on all sides at/above this breakpoint */
-    .border#{$variant}-0      { border: 0 !important; }
-
-    /* Add a gray border to the top */
-    .border#{$variant}-top    { border-top: $border !important; }
-    /* Add a gray border to the right */
-    .border#{$variant}-right  { border-right: $border !important; }
-    /* Add a gray border to the bottom */
-    .border#{$variant}-bottom { border-bottom: $border !important; }
-    /* Add a gray border to the left */
-    .border#{$variant}-left   { border-left: $border !important; }
-
-    /* Remove the top border */
-    .border#{$variant}-top-0    { border-top: 0 !important; }
-    /* Remove the right border */
-    .border#{$variant}-right-0  { border-right: 0 !important; }
-    /* Remove the bottom border */
-    .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
-    /* Remove the left border */
-    .border#{$variant}-left-0   { border-left: 0 !important; }
-
-    // Rounded corners
-    /* Remove the border-radius */
-    .rounded#{$variant}-0 { border-radius: 0 !important; }
-    /* Add a border-radius to all corners */
-    .rounded#{$variant}-1 { border-radius: $border-radius !important; }
-    /* Add a 2x border-radius to all corners */
-    .rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
-
-    @each $edge, $corners in $edges {
-      .rounded#{$variant}-#{$edge}-0 {
-        @each $corner in $corners {
-          border-#{$corner}-radius: 0 !important;
-        }
-      }
-
-      .rounded#{$variant}-#{$edge}-1 {
-        @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius !important;
-        }
-      }
-
-      .rounded#{$variant}-#{$edge}-2 {
-        @each $corner in $corners {
-          border-#{$corner}-radius: $border-radius * 2 !important;
-        }
-      }
-    }
-  }
-}
-
-/* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: 50% !important; }
-
-/* Change the border style to dashed, in conjunction with another utility */
-.border-dashed {
-  // stylelint-disable-next-line primer/borders
-  border-style: dashed !important;
-}
-
-/* Use with .border to turn the border blue */
-.border-blue        { border-color: $border-blue !important; }
-/* Use with .border to turn the border blue-light */
-.border-blue-light  { border-color: $border-blue-light !important; }
-/* Use with .border to turn the border green */
-.border-green       { border-color: $border-green !important; }
-/* Use with .border to turn the border green light */
-.border-green-light { border-color: $border-green-light !important; }
-/* Use with .border to turn the border red */
-.border-red         { border-color: $border-red !important; }
-/* Use with .border to turn the border red-light */
-.border-red-light   { border-color: $border-red-light !important; }
-/* Use with .border to turn the border purple */
-.border-purple      { border-color: $border-purple !important; }
-/* Use with .border to turn the border yellow */
-.border-yellow      { border-color: $border-yellow !important; }
-/* Use with .border to turn the border gray-light */
-.border-gray-light  { border-color: $border-gray-light !important; }
-/* Use with .border to turn the border gray-dark */
-.border-gray-dark   { border-color: $border-gray-dark !important; }
-
-/* Use with .border to turn the border rgba black 0.15 */
-.border-black-fade  { border-color: $border-black-fade !important; }
-/* Use with .border to turn the border rgba white 0.15 */
-.border-white-fade  { border-color: $border-white-fade !important; }
-
-/* Use with .border to turn the border white w/varying transparency */
-.border-white-fade-15 { border-color: $border-white-fade !important; }
-// stylelint-disable-next-line primer/borders
-.border-white-fade-30 { border-color: $white-fade-30 !important; }
-// stylelint-disable-next-line primer/borders
-.border-white-fade-50 { border-color: $white-fade-50 !important; }
-// stylelint-disable-next-line primer/borders
-.border-white-fade-70 { border-color: $white-fade-70 !important; }
-// stylelint-disable-next-line primer/borders
-.border-white-fade-85 { border-color: $white-fade-85 !important; }
diff --git a/assets/sass/@primer/css/utilities/box-shadow.scss b/assets/sass/@primer/css/utilities/box-shadow.scss
deleted file mode 100644
index fb5b1d6..0000000
--- a/assets/sass/@primer/css/utilities/box-shadow.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Box shadow utilities
-
-// Box shadows
-
-.box-shadow {
-  box-shadow: $box-shadow !important;
-}
-
-.box-shadow-medium {
-  box-shadow: $box-shadow-medium !important;
-}
-
-.box-shadow-large {
-  box-shadow: $box-shadow-large !important;
-}
-
-.box-shadow-extra-large {
-  box-shadow: $box-shadow-extra-large !important;
-}
-
-// Turn off box shadow
-
-.box-shadow-none {
-  box-shadow: none !important;
-}
diff --git a/assets/sass/@primer/css/utilities/colors.scss b/assets/sass/@primer/css/utilities/colors.scss
deleted file mode 100644
index 0864f8f..0000000
--- a/assets/sass/@primer/css/utilities/colors.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-// Color utilities
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
-
-// background colors
-/* Set the background to $bg-white */
-.bg-white      { background-color: $bg-white !important; }
-/* Set the background to $bg-blue */
-.bg-blue       { background-color: $bg-blue !important; }
-/* Set the background to $bg-blue-light */
-.bg-blue-light { background-color: $bg-blue-light !important; }
-/* Set the background to $bg-gray-dark */
-.bg-gray-dark  { background-color: $bg-gray-dark !important; }
-/* Set the background to $bg-gray */
-.bg-gray       { background-color: $bg-gray !important; }
-/* Set the background to $bg-gray-light */
-.bg-gray-light { background-color: $bg-gray-light !important; }
-/* Set the background to $bg-green */
-.bg-green      { background-color: $bg-green !important; }
-/* Set the background to $bg-green-light */
-.bg-green-light     { background-color: $bg-green-light !important; }
-/* Set the background to $bg-red */
-.bg-red        { background-color: $bg-red !important; }
-/* Set the background to $bg-red-light */
-.bg-red-light  { background-color: $bg-red-light !important; }
-/* Set the background to $bg-yellow */
-.bg-yellow     { background-color: $bg-yellow !important; }
-/* Set the background to $bg-yellow-light */
-.bg-yellow-light     { background-color: $bg-yellow-light !important; }
-/* Set the background to $bg-yellow-dark */
-.bg-yellow-dark      { background-color: $bg-yellow-dark !important; }
-/* Set the background to $bg-purple */
-.bg-purple     { background-color: $bg-purple !important; }
-/* Set the background to $bg-pink */
-.bg-pink { background-color: $bg-pink !important; }
-/* Set the background to $bg-purple-light */
-.bg-purple-light     { background-color: $bg-purple-light !important; }
-
-// Generate a foreground and background utility for every shade of every hue
-@each $hue, $shades in $hue-maps {
-  @each $index, $color in $shades {
-    .color-#{$hue}-#{$index} { color: $color !important; }
-    .bg-#{$hue}-#{$index} { background-color: $color !important; }
-  }
-}
-
-.bg-shade-gradient {
-  background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 200px !important;
-}
-
-// text colors
-/* Set the text color to $text-blue */
-.text-blue          { color: $text-blue !important; }
-/* Set the text color to $text-red */
-.text-red           { color: $text-red !important; }
-/* Set the text color to $text-gray-light */
-.text-gray-light    { color: $text-gray-light !important; }
-/* Set the text color to $text-gray */
-.text-gray          { color: $text-gray !important; }
-/* Set the text color to $text-gray-dark */
-.text-gray-dark     { color: $text-gray-dark !important; }
-/* Set the text color to $text-green */
-.text-green         { color: $text-green !important; }
-/* Set the text color to $text-yellow */
-.text-yellow        { color: $text-yellow !important; }
-/* Set the text color to $text-orange */
-.text-orange        { color: $text-orange !important; }
-/* Set the text color to $text-orange-light */
-.text-orange-light        { color: $text-orange-light !important; }
-/* Set the text color to $text-purple */
-.text-purple        { color: $text-purple !important; }
-/* Set the text color to $text-pink */
-.text-pink { color: $text-pink !important; }
-/* Set the text color to $text-white */
-.text-white         { color: $text-white !important; }
-/* Set the text color to inherit */
-.text-inherit       { color: inherit !important; }
-
-// Link colors
-// Sets the links color to $text-gray and $text-blue on hover
-.link-gray {
-  color: $text-gray !important;
-
-  &:hover {
-    color: $text-blue !important;
-  }
-}
-
-// Sets the links color to $text-gray-dark and $text-blue on hover
-.link-gray-dark {
-  color: $text-gray-dark !important;
-
-  &:hover {
-    color: $text-blue !important;
-  }
-}
-
-/* Set the link color to $text-blue on hover
-  Useful when you want only part of a link to turn blue on hover */
-.link-hover-blue {
-  &:hover {
-    color: $text-blue !important;
-  }
-}
-
-/* Make a link $text-gray, then $text-blue on hover and removes the underline */
-.muted-link {
-  color: $text-gray !important;
-
-  &:hover {
-    color: $text-blue !important;
-    text-decoration: none;
-  }
-}
diff --git a/assets/sass/@primer/css/utilities/details.scss b/assets/sass/@primer/css/utilities/details.scss
deleted file mode 100644
index 935bc05..0000000
--- a/assets/sass/@primer/css/utilities/details.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// stylelint-disable selector-max-type
-
-.details-overlay[open] > summary::before {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 80;
-  display: block;
-  cursor: default;
-  content: " ";
-  background: transparent;
-}
-
-.details-overlay-dark[open] > summary::before {
-  z-index: 99;
-  background: $bg-black-fade;
-}
-
-.details-reset {
-  // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
-  // Remove marker added by details polyfill
-  > summary::before { display: none; }
-  // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
-}
diff --git a/assets/sass/@primer/css/utilities/flexbox.scss b/assets/sass/@primer/css/utilities/flexbox.scss
deleted file mode 100644
index a0cd73a..0000000
--- a/assets/sass/@primer/css/utilities/flexbox.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-// Flex utility classes
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    // Flexbox classes
-    // Container
-    .flex#{$variant}-row            { flex-direction: row !important; }
-    .flex#{$variant}-row-reverse    { flex-direction: row-reverse !important; }
-    .flex#{$variant}-column         { flex-direction: column !important; }
-    .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
-
-    .flex#{$variant}-wrap     { flex-wrap: wrap !important; }
-    .flex#{$variant}-nowrap   { flex-wrap: nowrap !important; }
-
-    .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
-    .flex#{$variant}-justify-end      { justify-content: flex-end !important; }
-    .flex#{$variant}-justify-center   { justify-content: center !important; }
-    .flex#{$variant}-justify-between  { justify-content: space-between !important; }
-    .flex#{$variant}-justify-around   { justify-content: space-around !important; }
-
-    .flex#{$variant}-items-start      { align-items: flex-start !important; }
-    .flex#{$variant}-items-end        { align-items: flex-end !important; }
-    .flex#{$variant}-items-center     { align-items: center !important; }
-    .flex#{$variant}-items-baseline   { align-items: baseline !important; }
-    .flex#{$variant}-items-stretch    { align-items: stretch !important; }
-
-    .flex#{$variant}-content-start    { align-content: flex-start !important; }
-    .flex#{$variant}-content-end      { align-content: flex-end !important; }
-    .flex#{$variant}-content-center   { align-content: center !important; }
-    .flex#{$variant}-content-between  { align-content: space-between !important; }
-    .flex#{$variant}-content-around   { align-content: space-around !important; }
-    .flex#{$variant}-content-stretch  { align-content: stretch !important; }
-
-    // Item
-    .flex#{$variant}-1        { flex: 1 !important; }
-    .flex#{$variant}-auto     { flex: auto !important; }
-    .flex#{$variant}-grow-0   { flex-grow: 0 !important; }
-    .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
-
-    .flex#{$variant}-self-auto        { align-self: auto !important; }
-    .flex#{$variant}-self-start       { align-self: flex-start !important; }
-    .flex#{$variant}-self-end         { align-self: flex-end !important; }
-    .flex#{$variant}-self-center      { align-self: center !important; }
-    .flex#{$variant}-self-baseline    { align-self: baseline !important; }
-    .flex#{$variant}-self-stretch     { align-self: stretch !important; }
-
-    .flex#{$variant}-order-1 { order: 1 !important; }
-    .flex#{$variant}-order-2 { order: 2 !important; }
-    .flex#{$variant}-order-none { order: inherit !important; }
-  }
-}
diff --git a/assets/sass/@primer/css/utilities/index.scss b/assets/sass/@primer/css/utilities/index.scss
deleted file mode 100644
index 7d68a09..0000000
--- a/assets/sass/@primer/css/utilities/index.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import "../support/index.scss";
-// utilities
-@import "./animations.scss";
-@import "./borders.scss";
-@import "./box-shadow.scss";
-@import "./colors.scss";
-@import "./details.scss";
-@import "./flexbox.scss";
-@import "./layout.scss";
-@import "./margin.scss";
-@import "./padding.scss";
-@import "./typography.scss";
-// Visibility and display should always come last in the imports so that they override other utilities with !important
-@import "./visibility-display.scss";
diff --git a/assets/sass/@primer/css/utilities/layout.scss b/assets/sass/@primer/css/utilities/layout.scss
deleted file mode 100644
index 1b4da95..0000000
--- a/assets/sass/@primer/css/utilities/layout.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-// Layout
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
-
-// Loop through the breakpoint values
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    @each $position in $responsive-positions {
-      .position#{$variant}-#{$position} {
-        position: $position !important;
-      }
-    }
-  }
-}
-
-/* Set top 0 */
-.top-0    { top: 0 !important; }
-/* Set right 0 */
-.right-0  { right: 0 !important; }
-/* Set bottom 0 */
-.bottom-0 { bottom: 0 !important; }
-/* Set left 0 */
-.left-0   { left: 0 !important; }
-
-/* Vertical align middle */
-.v-align-middle      { vertical-align: middle !important; }
-/* Vertical align top */
-.v-align-top         { vertical-align: top !important; }
-/* Vertical align bottom */
-.v-align-bottom      { vertical-align: bottom !important; }
-/* Vertical align to the top of the text */
-.v-align-text-top    { vertical-align: text-top !important; }
-/* Vertical align to the bottom of the text */
-.v-align-text-bottom { vertical-align: text-bottom !important; }
-/* Vertical align to the parent's baseline */
-.v-align-baseline    { vertical-align: baseline !important; }
-
-// Overflow utilities
-@each $overflow in (visible, hidden, auto, scroll) {
-  .overflow-#{$overflow} { overflow: $overflow !important; }
-  .overflow-x-#{$overflow} { overflow-x: $overflow !important; }
-  .overflow-y-#{$overflow} { overflow-y: $overflow !important; }
-}
-
-// Clear floats
-/* Clear floats around the element */
-.clearfix {
-  @include clearfix;
-}
-
-// Floats
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    /* Float to the left */
-    .float#{$variant}-left  { float: left !important; }
-    /* Float to the right */
-    .float#{$variant}-right  { float: right !important; }
-    /* No float */
-    .float#{$variant}-none { float: none !important; }
-  }
-}
-
-// Width and height utilities, helpful in combination
-// with display-table utilities and images
-/* Max width 100% */
-.width-fit   { max-width: 100% !important; }
-/* Set the width to 100% */
-.width-full  { width: 100% !important; }
-/* Max height 100% */
-.height-fit  { max-height: 100% !important; }
-/* Set the height to 100% */
-.height-full { height: 100% !important; }
-
-/* Remove min-width from element */
-.min-width-0 { min-width: 0 !important; }
-
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-
-    // Auto varients
-    .width#{$variant}-auto { width: auto !important; }
-
-    /* Set the direction to rtl */
-    .direction#{$variant}-rtl { direction: rtl !important; }
-    /* Set the direction to ltr */
-    .direction#{$variant}-ltr { direction: ltr !important; }
-  }
-}
diff --git a/assets/sass/@primer/css/utilities/margin.scss b/assets/sass/@primer/css/utilities/margin.scss
deleted file mode 100644
index 2212e91..0000000
--- a/assets/sass/@primer/css/utilities/margin.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// Margin spacer utilities
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
-
-// Loop through the breakpoint values
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    // Loop through the spacer values
-    @each $scale, $size in $spacer-map {
-      /* Set a $size margin to all sides at $breakpoint */
-      .m#{$variant}-#{$scale}  { margin: $size !important; }
-      /* Set a $size margin on the top at $breakpoint */
-      .mt#{$variant}-#{$scale} { margin-top: $size !important; }
-      /* Set a $size margin on the right at $breakpoint */
-      .mr#{$variant}-#{$scale} { margin-right: $size !important; }
-      /* Set a $size margin on the bottom at $breakpoint */
-      .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
-      /* Set a $size margin on the left at $breakpoint */
-      .ml#{$variant}-#{$scale} { margin-left: $size !important; }
-
-      @if ($size != 0) {
-        /* Set a negative $size margin on top at $breakpoint */
-        .mt#{$variant}-n#{$scale} { margin-top   : -$size !important; }
-        /* Set a negative $size margin on the right at $breakpoint */
-        .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
-        /* Set a negative $size margin on the bottom at $breakpoint */
-        .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
-        /* Set a negative $size margin on the left at $breakpoint */
-        .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
-      }
-
-      /* Set a $size margin on the left & right at $breakpoint */
-      .mx#{$variant}-#{$scale} {
-        margin-right: $size !important;
-        margin-left: $size !important;
-      }
-
-      /* Set a $size margin on the top & bottom at $breakpoint */
-      .my#{$variant}-#{$scale} {
-        margin-top: $size !important;
-        margin-bottom: $size !important;
-      }
-    }
-
-    /* responsive horizontal auto margins */
-    .mx#{$variant}-auto {
-      margin-right: auto !important;
-      margin-left: auto !important;
-    }
-  }
-}
diff --git a/assets/sass/@primer/css/utilities/padding.scss b/assets/sass/@primer/css/utilities/padding.scss
deleted file mode 100644
index 9914bb8..0000000
--- a/assets/sass/@primer/css/utilities/padding.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-// Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
-
-// Responsive padding spacer utilities
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    // Loop through the spacer values
-    @each $scale, $size in $spacer-map {
-      /* Set a $size padding to all sides at $breakpoint */
-      .p#{$variant}-#{$scale}  { padding: $size !important; }
-      /* Set a $size padding to the top at $breakpoint */
-      .pt#{$variant}-#{$scale} { padding-top: $size !important; }
-      /* Set a $size padding to the right at $breakpoint */
-      .pr#{$variant}-#{$scale} { padding-right: $size !important; }
-      /* Set a $size padding to the bottom at $breakpoint */
-      .pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
-      /* Set a $size padding to the left at $breakpoint */
-      .pl#{$variant}-#{$scale} { padding-left: $size !important; }
-
-      /* Set a $size padding to the left & right at $breakpoint */
-      .px#{$variant}-#{$scale} {
-        padding-right: $size !important;
-        padding-left: $size !important;
-      }
-
-      /* Set a $size padding to the top & bottom at $breakpoint */
-      .py#{$variant}-#{$scale} {
-        padding-top: $size !important;
-        padding-bottom: $size !important;
-      }
-    }
-  }
-}
-
-// responsive padding for containers
-.p-responsive {
-  padding-right: $spacer-3 !important;
-  padding-left: $spacer-3 !important;
-
-  @include breakpoint(sm) {
-    padding-right: $spacer-6 !important;
-    padding-left: $spacer-6 !important;
-  }
-
-  @include breakpoint(lg) {
-    padding-right: $spacer-3 !important;
-    padding-left: $spacer-3 !important;
-  }
-}
diff --git a/assets/sass/@primer/css/utilities/typography.scss b/assets/sass/@primer/css/utilities/typography.scss
deleted file mode 100644
index f790a71..0000000
--- a/assets/sass/@primer/css/utilities/typography.scss
+++ /dev/null
@@ -1,255 +0,0 @@
-// stylelint-disable block-closing-brace-space-before, comment-empty-line-before
-
-// Type scale variables found in ../support/lib/variables.scss
-// $h00-size-mobile: 40px;
-// $h0-size-mobile: 32px;
-// $h1-size-mobile: 26px;
-// $h2-size-mobile: 22px;
-// $h3-size-mobile: 18px;
-// $h00-size: 48px;
-// $h0-size: 40px;
-// $h1-size: 32px;
-// $h2-size: 24px;
-// $h3-size: 20px;
-// $h4-size: 16px;
-// $h5-size: 14px;
-// $h6-size: 12px;
-
-/* Set the font size to 26px */
-.h1 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
-
-  @include breakpoint(md) { font-size: $h1-size !important; }
-}
-
-/* Set the font size to 22px */
-.h2 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !important;
-
-  @include breakpoint(md) { font-size: $h2-size !important; }
-}
-
-/* Set the font size to 18px */
-.h3 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
-
-  @include breakpoint(md) { font-size: $h3-size !important; }
-}
-
-/* Set the font size to #{$h4-size} */
-.h4 {
-  font-size: $h4-size !important;
-}
-
-/* Set the font size to #{$h5-size} */
-.h5 { font-size: $h5-size !important; }
-
-// Does not include color property like typography base
-// styles, color should be applied with color utilities.
-/* Set the font size to #{$h6-size} */
-.h6 { font-size: $h6-size !important; }
-
-// Heading utilities
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 { font-weight: $font-weight-bold !important; }
-
-// Type utilities that match type sale
-/* Set the font size to 26px */
-.f1 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
-
-  @include breakpoint(md) { font-size: $h1-size !important; }
-}
-
-/* Set the font size to 22px */
-.f2 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !important;
-
-  @include breakpoint(md) { font-size: $h2-size !important; }
-}
-
-/* Set the font size to 18px */
-.f3 {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
-
-  @include breakpoint(md) { font-size: $h3-size !important; }
-}
-
-/* Set the font size to #{$h4-size} */
-.f4 {
-  font-size: $h4-size !important;
-
-  @include breakpoint(md) { font-size: $h4-size !important; }
-}
-
-/* Set the font size to #{$h5-size} */
-.f5 { font-size: $h5-size !important; }
-/* Set the font size to #{$h6-size} */
-.f6 { font-size: $h6-size !important; }
-
-// Type utils with light weight that match type scale
-/* Set the font size to 40px and weight to light */
-.f00-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h00-size-mobile !important;
-  font-weight: $font-weight-light !important;
-
-  @include breakpoint(md) { font-size: $h00-size !important; }
-}
-
-/* Set the font size to 32px and weight to light */
-.f0-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h0-size-mobile !important;
-  font-weight: $font-weight-light !important;
-
-  @include breakpoint(md) { font-size: $h0-size !important; }
-}
-
-/* Set the font size to 26px and weight to light */
-.f1-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h1-size-mobile !important;
-  font-weight: $font-weight-light !important;
-
-  @include breakpoint(md) { font-size: $h1-size !important; }
-}
-
-/* Set the font size to 22px and weight to light */
-.f2-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h2-size-mobile !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
-/* Set the font size to 18px and weight to light */
-.f3-light {
-  // stylelint-disable-next-line primer/typography
-  font-size: $h3-size-mobile !important;
-  font-weight: $font-weight-light !important;
-
-  @include breakpoint(md) { font-size: $h3-size !important; }
-}
-
-// Smallest text size
-/* Set the font size to ${#h6-size} */
-.text-small { font-size: $h6-size !important; } // 12px
-
-/* Large leading paragraphs */
-.lead {
-  // stylelint-disable-next-line primer/spacing
-  margin-bottom: 30px;
-  font-size: $h3-size;
-  font-weight: $font-weight-light;
-  color: $text-gray;
-}
-
-// 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.
-// Responsive line-height
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    /* Set the line height to ultra condensed */
-    .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; }
-    /* Set the line height to condensed */
-    .lh#{$variant}-condensed { line-height: $lh-condensed !important; }
-    /* Set the line height to default */
-    .lh#{$variant}-default { line-height: $lh-default !important; }
-    /* Set the line height to zero */
-    .lh#{$variant}-0 { line-height: 0 !important; }
-  }
-}
-
-// Text alignments
-// Responsive text alignment
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    /* Text align to the right */
-    .text#{$variant}-right { text-align: right !important; }
-    /* Text align to the left */
-    .text#{$variant}-left { text-align: left !important; }
-    /* Text align to the center */
-    .text#{$variant}-center { text-align: center !important; }
-  }
-}
-
-// Text styles
-/* Set the font weight to normal */
-.text-normal { font-weight: $font-weight-normal !important; }
-/* Set the font weight to bold */
-.text-bold { font-weight: $font-weight-bold !important;}
-/* Set the font to italic */
-.text-italic { font-style: italic !important; }
-/* Make text uppercase */
-.text-uppercase { text-transform: uppercase !important; }
-/* Underline text */
-.text-underline { text-decoration: underline !important; }
-/* Don't underline text */
-.no-underline { text-decoration: none !important; }
-/* Don't wrap white space */
-.no-wrap { white-space: nowrap !important; }
-/* Normal white space */
-.ws-normal { white-space: normal !important; }
-
-/* Force long "words" to wrap if they exceed the width of the container */
-.break-word {
-  word-break: break-word !important;
-  // this is for backwards compatibility with browsers that don't respect overflow-wrap
-  word-wrap: break-word !important;
-  overflow-wrap: break-word !important;
-}
-
-/*
- * Specifically apply word-break: break-all; per MDN:
- *
- * > Note: In contrast to `word-break: break-word` and `overflow-wrap: break-word`,
- * > `word-break: break-all` will create a break at the exact place where text would
- * > otherwise overflow its container (even if putting an entire word on its own line
- * > would negate the need for a break).
- *
- * see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values
- */
-.wb-break-all { word-break: break-all !important; }
-
-.text-emphasized {
-  font-weight: $font-weight-bold;
-  color: $text-gray-dark;
-}
-
-// List styles
-.list-style-none { list-style: none !important; }
-
-// Text Shadows
-/* Add a dark text shadow */
-.text-shadow-dark {
-  text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75);
-}
-/* Add a light text shadow */
-.text-shadow-light {
-  text-shadow: 0 1px 0 rgba($white, 0.5);
-}
-
-/* Set to monospace font */
-.text-mono {
-  font-family: $mono-font !important;
-}
-
-/* Disallow user from selecting text */
-.user-select-none {
-  user-select: none !important;
-}
diff --git a/assets/sass/@primer/css/utilities/visibility-display.scss b/assets/sass/@primer/css/utilities/visibility-display.scss
deleted file mode 100644
index 61c6f5f..0000000
--- a/assets/sass/@primer/css/utilities/visibility-display.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-// Visibility and display utilities
-
-// Responsive display utilities
-@each $breakpoint, $variant in $responsive-variants {
-  @include breakpoint($breakpoint) {
-    @each $display in $display-values {
-      .d#{$variant}-#{$display} { display: $display !important; }
-    }
-  }
-}
-
-.v-hidden { visibility: hidden !important; }
-.v-visible { visibility: visible !important; }
-
-// Hide utilities for each breakpoint
-// Each hide utility only applies to one breakpoint range.
-@media (max-width: $width-sm - 1px) {
-  .hide-sm {
-    display: none !important;
-  }
-}
-
-@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
-  .hide-md {
-    display: none !important;
-  }
-}
-
-@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
-  .hide-lg {
-    display: none !important;
-  }
-}
-
-@media (min-width: $width-lg) {
-  .hide-xl {
-    display: none !important;
-  }
-}
-
-/* Set the table-layout to fixed */
-.table-fixed { table-layout: fixed !important; }
-
-// Only display content to screen readers
-//
-// See: http://a11yproject.com/posts/how-to-hide-content/
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631
-  word-wrap: normal;
-  border: 0;
-}
-
-// Only display content on focus
-.show-on-focus {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-
-  &:focus {
-    z-index: 20;
-    width: auto;
-    height: auto;
-    clip: auto;
-  }
-}