build: update primer

22 files changed, 262 insertions, 569 deletions

diff --git a/assets/scss/_primer/LICENSE b/assets/scss/_primer/LICENSE
index 71fbac5..4a03ad6 100644
--- a/assets/scss/_primer/LICENSE
+++ b/assets/scss/_primer/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 GitHub Inc.
+Copyright (c) 2021 GitHub Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/assets/scss/_primer/base/base.scss b/assets/scss/_primer/base/base.scss
index 381fa89..8b6fbb0 100644
--- a/assets/scss/_primer/base/base.scss
+++ b/assets/scss/_primer/base/base.scss
@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: $body-font-size;
   line-height: $body-line-height;
-  color: $text-gray-dark;
-  background-color: $bg-white;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-canvas);
 }
 
 a {
-  color: $text-blue;
+  color: var(--color-text-link);
   text-decoration: none;
 
   &:hover {
@@ -45,8 +45,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  // stylelint-disable-next-line primer/borders
-  border-bottom: $border-width $border-style lighten($gray-300, 5%);
+  border-bottom: $border-width $border-style var(--color-border-secondary);
   @include clearfix();
 }
 
diff --git a/assets/scss/_primer/base/kbd.scss b/assets/scss/_primer/base/kbd.scss
index 7ee4503..033c03a 100644
--- a/assets/scss/_primer/base/kbd.scss
+++ b/assets/scss/_primer/base/kbd.scss
@@ -8,14 +8,13 @@ kbd {
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-700;
+  color: var(--color-text-primary);
   vertical-align: middle;
-  background-color: $bg-gray-light;
+  background-color: var(--color-bg-secondary);
   // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width $border-gray-dark;
-  border-bottom-color: $border-gray-dark;
+  border: $border-style $border-width var(--color-border-tertiary);
+  border-bottom-color: var(--color-border-tertiary);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-gray-dark;
+  box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
 }
diff --git a/assets/scss/_primer/base/normalize.scss b/assets/scss/_primer/base/normalize.scss
index 95931e7..6a1e3c1 100644
--- a/assets/scss/_primer/base/normalize.scss
+++ b/assets/scss/_primer/base/normalize.scss
@@ -162,7 +162,7 @@ h1 {
 
 mark {
   background-color: #ff0;
-  color: $text-black;
+  color: var(--color-text-primary);
 }
 
 /**
diff --git a/assets/scss/_primer/markdown/blob-csv.scss b/assets/scss/_primer/markdown/blob-csv.scss
index e97e447..be7d257 100644
--- a/assets/scss/_primer/markdown/blob-csv.scss
+++ b/assets/scss/_primer/markdown/blob-csv.scss
@@ -15,7 +15,7 @@
     // stylelint-disable-next-line primer/spacing
     padding: 10px $spacer-2 9px;
     text-align: right;
-    background: $bg-white;
+    background: var(--color-bg-primary);
     border: 0;
   }
 
@@ -23,7 +23,7 @@
 
   th {
     font-weight: $font-weight-bold;
-    background: $bg-gray;
+    background: var(--color-bg-tertiary);
     border-top: 0;
   }
 }
diff --git a/assets/scss/_primer/markdown/code.scss b/assets/scss/_primer/markdown/code.scss
index fbd2d16..5ed6a6c 100644
--- a/assets/scss/_primer/markdown/code.scss
+++ b/assets/scss/_primer/markdown/code.scss
@@ -8,8 +8,7 @@
     margin: 0;
     // stylelint-disable-next-line primer/typography
     font-size: 85%;
-    // stylelint-disable-next-line primer/colors
-    background-color: rgba($black, 0.05);
+    background-color: var(--color-markdown-code-bg);
     border-radius: $border-radius;
 
     br { display: none; }
@@ -50,7 +49,7 @@
     font-size: 85%;
     // stylelint-disable-next-line primer/typography
     line-height: 1.45;
-    background-color: $bg-gray;
+    background-color: var(--color-bg-tertiary);
     border-radius: $border-radius;
   }
 
diff --git a/assets/scss/_primer/markdown/headings.scss b/assets/scss/_primer/markdown/headings.scss
index 26347bb..3cd86e9 100644
--- a/assets/scss/_primer/markdown/headings.scss
+++ b/assets/scss/_primer/markdown/headings.scss
@@ -15,7 +15,7 @@
     line-height: $lh-condensed;
 
     .octicon-link {
-      color: $text-black;
+      color: var(--color-text-primary);
       vertical-align: middle;
       visibility: hidden;
     }
@@ -39,7 +39,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
-    border-bottom: $border-width $border-style $border-gray-light;
+    border-bottom: $border-width $border-style var(--color-border-secondary);
   }
 
   h2 {
@@ -47,7 +47,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
-    border-bottom: $border-width $border-style $border-gray-light;
+    border-bottom: $border-width $border-style var(--color-border-secondary);
   }
 
   h3 {
@@ -67,6 +67,6 @@
   h6 {
     // stylelint-disable-next-line primer/typography
     font-size: 0.85em;
-    color: $text-gray-light;
+    color: var(--color-text-tertiary);
   }
 }
diff --git a/assets/scss/_primer/markdown/images.scss b/assets/scss/_primer/markdown/images.scss
index caea502..3efb011 100644
--- a/assets/scss/_primer/markdown/images.scss
+++ b/assets/scss/_primer/markdown/images.scss
@@ -8,7 +8,7 @@
     // 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: $bg-white;
+    background-color: var(--color-bg-primary);
 
     &[align=right] {
       // stylelint-disable-next-line primer/spacing
@@ -44,8 +44,7 @@
       // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
-      // stylelint-disable-next-line primer/borders
-      border: $border-width $border-style lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-markdown-frame-border);
     }
 
     span img {
@@ -58,7 +57,7 @@
       // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: $text-gray-dark;
+      color: var(--color-text-primary);
     }
   }
 
diff --git a/assets/scss/_primer/markdown/lists.scss b/assets/scss/_primer/markdown/lists.scss
index b680faf..f61233c 100644
--- a/assets/scss/_primer/markdown/lists.scss
+++ b/assets/scss/_primer/markdown/lists.scss
@@ -2,7 +2,6 @@
 // stylelint-disable selector-no-qualifying-type
 // stylelint-disable selector-max-type
 .markdown-body {
-
   // Lists, Blockquotes & Such
   ul,
   ol {
@@ -15,6 +14,24 @@
     }
   }
 
+  ol[type="1"] {
+    list-style-type: decimal;
+  }
+
+  ol[type="a"] {
+    list-style-type: lower-alpha;
+  }
+
+  ol[type="i"] {
+    list-style-type: lower-roman;
+  }
+
+  // Reset <ol> style to decimal (HTML default) specifically for AsciiDoc
+  // <div><ol> construction (doesn't affect MarkDown)
+  div > ol:not([type]) {
+    list-style-type: decimal;
+  }
+
   // 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.
@@ -46,10 +63,6 @@
     margin-bottom: 0;
   }
 
-  li {
-    word-wrap: break-all;
-  }
-
   li > p {
     margin-top: $spacer-3;
   }
diff --git a/assets/scss/_primer/markdown/markdown-body.scss b/assets/scss/_primer/markdown/markdown-body.scss
index 6581f19..eb46ea8 100644
--- a/assets/scss/_primer/markdown/markdown-body.scss
+++ b/assets/scss/_primer/markdown/markdown-body.scss
@@ -45,7 +45,7 @@
 
   // Link Colors
   .absent {
-    color: $text-red;
+    color: var(--color-text-danger);
   }
 
   .anchor {
@@ -77,16 +77,16 @@
     padding: 0;
     margin: $spacer-4 0;
     // stylelint-disable-next-line primer/colors
-    background-color: $gray-200;
+    background-color: var(--color-border-primary);
     border: 0;
   }
 
   blockquote {
     // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: $text-gray-light;
+    color: var(--color-text-tertiary);
     // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style lighten($gray-300, 5%);
+    border-left: 0.25em $border-style var(--color-markdown-blockquote-border);
 
     > :first-child {
       margin-top: 0;
diff --git a/assets/scss/_primer/markdown/tables.scss b/assets/scss/_primer/markdown/tables.scss
index 5e1e0bd..83a1a9f 100644
--- a/assets/scss/_primer/markdown/tables.scss
+++ b/assets/scss/_primer/markdown/tables.scss
@@ -2,7 +2,7 @@
 // stylelint-disable selector-max-type
 .markdown-body {
   // Tables
-  table:not(.highlight) {
+  table {
     display: block;
     width: 100%; // keep for backwards compatibility
     width: max-content;
@@ -17,17 +17,15 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      // stylelint-disable-next-line primer/borders
-      border: $border-width $border-style lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-markdown-table-border);
     }
 
     tr {
-      background-color: $bg-white;
-      // stylelint-disable-next-line primer/borders
-      border-top: $border-width $border-style darken($gray-300, 4%);
+      background-color: var(--color-bg-primary);
+      border-top: $border-width $border-style var(--color-markdown-table-tr-border);
 
       &:nth-child(2n) {
-        background-color: $bg-gray;
+        background-color: var(--color-bg-tertiary);
       }
     }
 
diff --git a/assets/scss/_primer/support/index.scss b/assets/scss/_primer/support/index.scss
index 93f9449..85a2c7c 100644
--- a/assets/scss/_primer/support/index.scss
+++ b/assets/scss/_primer/support/index.scss
@@ -1,11 +1,10 @@
 // variables
 @import "./variables/typography.scss";
-@import "./variables/colors.scss";
 @import "./variables/layout.scss";
 @import "./variables/misc.scss";
 
 // mixins
+@import "./mixins/color-modes.scss";
 @import "./mixins/typography.scss";
 @import "./mixins/layout.scss";
-@import "./mixins/buttons.scss";
 @import "./mixins/misc.scss";
diff --git a/assets/scss/_primer/support/mixins/buttons.scss b/assets/scss/_primer/support/mixins/buttons.scss
deleted file mode 100644
index ca8b59f..0000000
--- a/assets/scss/_primer/support/mixins/buttons.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-
-// TODO: See if the mixins below can be deprecated
-// Might still be needed for .btn-blue
-// ------------------------------------------------------------------
-
-// Button color generator for primary and themed buttons
-
-// New button hotness
-@mixin btn-solid($color, $bg, $bg2) {
-  color: $color;
-  background-color: $bg2;
-  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-
-  @if $bg == $gray-000 {
-    &:focus,
-    &.focus {
-      box-shadow: $btn-input-focus-shadow;
-    }
-
-    &:hover,
-    &.hover {
-      background-color: darken($bg2, 3%);
-      background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
-      background-position: 0 -$em-spacer-5;
-      border-color: rgba($black, 0.35);
-    }
-
-    &:active,
-    &.selected,
-    &[aria-selected=true],
-    [open] > & {
-      background-color: darken(desaturate($bg, 10%), 6%);
-      background-image: none;
-      border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
-      box-shadow: $btn-active-shadow;
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled=true] {
-      color: rgba($color, 0.4);
-      background-color: $bg2;
-      background-image: none;
-      border-color: $border-color-button;
-      box-shadow: none;
-    }
-
-  }
-  @else {
-    &:focus,
-    &.focus {
-      box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
-    }
-
-    &:hover,
-    &.hover {
-      background-color: darken($bg2, 2%);
-      background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
-      background-position: 0 -$em-spacer-5;
-      border-color: $black-fade-50;
-    }
-
-    &:active,
-    &.selected,
-    &[aria-selected=true],
-    [open] > & {
-      background-color: darken(mix($bg, $bg2, 50%), 7%);
-      background-image: none;
-      border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
-      box-shadow: $btn-active-shadow;
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled=true] {
-      color: rgba($color, 0.75);
-      background-color: mix($bg2, $white, 50%);
-      background-image: none;
-      border-color: $border-color-button;
-      box-shadow: none;
-    }
-
-    .Counter {
-      color: darken($bg, 8%);
-      background-color: $white;
-    }
-  }
-}
-
-// Inverse button hover style
-@mixin btn-inverse($color, $bg, $bg2) {
-  color: $color;
-  background-color: $bg;
-  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-
-  &:focus {
-    box-shadow: 0 0 0 0.2em rgba($color, 0.4);
-  }
-
-  &:hover {
-    color: $text-white;
-    background-color: $color;
-    background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
-    border-color: $black-fade-50;
-
-    .Counter {
-      color: $text-white;
-    }
-  }
-
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    color: $text-white;
-    background-color: darken($color, 5%);
-    background-image: none;
-    border-color: $black-fade-50;
-    box-shadow: $btn-active-shadow;
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    color: rgba($color, 0.4);
-    background-color: $bg2;
-    background-image: none;
-    border-color: $border-color-button;
-    box-shadow: none;
-  }
-}
-
-// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
-@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
-  color: $text-color;
-  background-color: $bg-color;
-  background-image: none;
-
-  .Counter {
-    background-color: rgba($black, 0.07);
-  }
-
-  &:hover,
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    color: $bg-color;
-    background-color: $text-color;
-    background-image: none;
-    border-color: $text-color;
-
-    .Counter {
-      color: $text-color;
-      background-color: $bg-color;
-    }
-  }
-
-  &:focus {
-    border-color: $text-color;
-    box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    color: $black-fade-30;
-    background-color: $bg-white;
-    border-color: $black-fade-15;
-    box-shadow: none;
-  }
-}
diff --git a/assets/scss/_primer/support/mixins/color-modes.scss b/assets/scss/_primer/support/mixins/color-modes.scss
new file mode 100644
index 0000000..e4ad958
--- /dev/null
+++ b/assets/scss/_primer/support/mixins/color-modes.scss
@@ -0,0 +1,106 @@
+@mixin color-mode-theme($theme-name, $include-root: false) {
+  @if $include-root {
+    :root,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
+      @content;
+
+      /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
+    }
+  }
+  @else {
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
+      @content;
+    }
+  }
+}
+
+@mixin color-mode($mode) {
+  @if $mode == light {
+    :root,
+    [data-color-mode="light"][data-light-theme*="#{$mode}"],
+    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+  @else {
+    [data-color-mode="light"][data-light-theme*="#{$mode}"],
+    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-color-mode="auto"][data-light-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-color-mode="auto"][data-dark-theme*="#{$mode}"] {
+      @content;
+    }
+  }
+}
+
+// This mixin takes a map of color mode vars and splits them into dark and light mode
+// The goal is to reduce the amount of dark/light mode selectors compiled.
+//
+// Example input for $color-map
+//
+// @include color-variables(("custom-css-variable-1": (
+//     light: var(--color-scale-gray-3),
+//     dark: var(--color-scale-gray-5)
+//   ),
+//   "custom-css-variable-2": (
+//     light: var(--color-scale-gray-2),
+//     dark: var(--color-scale-gray-6)
+//   ),
+//   "custom-css-variable-3": (
+//     light: var(--color-scale-gray-2),
+//     dark: var(--color-scale-gray-6)
+//   )
+// ));
+@mixin color-variables($color-map) {
+  // Create map to store incoming variables
+  $dark-colors: ();
+  $light-colors: ();
+
+  @each $name, $value in $color-map {
+    @each $type, $color in $value {
+      @if $type == dark {
+        $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
+      }
+      @else {
+        $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
+      }
+    }
+  }
+
+  $mode-colors: (
+    dark: $dark-colors,
+    light: $light-colors
+  );
+
+  // Loop through sorted list
+  @each $mode, $variables in $mode-colors {
+    @include color-mode($mode) {
+      @each $prop, $val in $variables {
+        #{$prop}: $val;
+      }
+    }
+  }
+}
diff --git a/assets/scss/_primer/support/mixins/misc.scss b/assets/scss/_primer/support/mixins/misc.scss
index ebdd32d..e4641ab 100644
--- a/assets/scss/_primer/support/mixins/misc.scss
+++ b/assets/scss/_primer/support/mixins/misc.scss
@@ -1,29 +1,26 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
+@mixin double-caret($background: var(--color-bg-primary), $border: var(--color-border-primary)) {
   &::after,
   &::before {
     position: absolute;
     top: 11px;
     right: 100%;
-    left: -16px;
+    left: -8px;
     display: block;
-    width: 0;
-    height: 0;
+    width: 8px;
+    height: 16px;
     pointer-events: none;
     content: " ";
-    border-color: transparent;
-    border-style: solid solid outset;
+    clip-path: polygon(0 50%, 100% 0, 100% 100%);
   }
 
   &::after {
-    margin-top: 1px;
-    margin-left: 2px;
-    border-width: 7px;
-    border-right-color: $foreground;
+    margin-left: 1px;
+    background-color: var(--color-bg-primary);
+    background-image: linear-gradient($background, $background);
   }
 
   &::before {
-    border-width: 8px;
-    border-right-color: $background;
+    background-color: $border;
   }
 }
diff --git a/assets/scss/_primer/support/variables/color-system.scss b/assets/scss/_primer/support/variables/color-system.scss
deleted file mode 100644
index febc58b..0000000
--- a/assets/scss/_primer/support/variables/color-system.scss
+++ /dev/null
@@ -1,243 +0,0 @@
-// Black based on same hue as $gray-900
-$black: #1b1f23 !default;
-$white: #fff !default;
-
-//
-//
-// -------- Grays --------
-$gray-000:        #fafbfc !default;
-$gray-100:        #f6f8fa !default;
-$gray-200:        #e1e4e8 !default;
-$gray-300:        #d1d5da !default;
-$gray-400:        #959da5 !default;
-$gray-500:        #6a737d !default;
-$gray-600:        #586069 !default;
-$gray-700:        #444d56 !default;
-$gray-800:        #2f363d !default;
-$gray-900:        #24292e !default; // body font color
-
-// -------- Blue --------
-$blue-000:        #f1f8ff !default;
-$blue-100:        #dbedff !default;
-$blue-200:        #c8e1ff !default;
-$blue-300:        #79b8ff !default;
-$blue-400:        #2188ff !default;
-$blue-500:        #0366d6 !default; // Default: Passes AA with #fff
-$blue-600:        #005cc5 !default;
-$blue-700:        #044289 !default;
-$blue-800:        #032f62 !default;
-$blue-900:        #05264c !default; // Passes with 1/2/300 blues
-
-// -------- Green --------
-$green-000:       #f0fff4 !default;
-$green-100:       #dcffe4 !default;
-$green-200:       #bef5cb !default;
-$green-300:       #85e89d !default;
-$green-400:       #34d058 !default;
-$green-500:       #28a745 !default; // Default. passes AA Large
-$green-600:       #22863a !default; // Text green, passes AA on #fff
-$green-700:       #176f2c !default;
-$green-800:       #165c26 !default;
-$green-900:       #144620 !default;
-
-// -------- Yellow --------
-$yellow-000:      #fffdef !default;
-$yellow-100:      #fffbdd !default;
-$yellow-200:      #fff5b1 !default;
-$yellow-300:      #ffea7f !default;
-$yellow-400:      #ffdf5d !default;
-$yellow-500:      #ffd33d !default;
-$yellow-600:      #f9c513 !default;
-$yellow-700:      #dbab09 !default;
-$yellow-800:      #b08800 !default;
-$yellow-900:      #735c0f !default;
-
-// -------- Orange --------
-$orange-000:      #fff8f2 !default;
-$orange-100:      #ffebda !default;
-$orange-200:      #ffd1ac !default;
-$orange-300:      #ffab70 !default;
-$orange-400:      #fb8532 !default;
-$orange-500:      #f66a0a !default; // Default. passes AA Large with #fff
-$orange-600:      #e36209 !default;
-$orange-700:      #d15704 !default;
-$orange-800:      #c24e00 !default;
-$orange-900:      #a04100 !default;
-
-// -------- Red --------
-$red-000:         #ffeef0 !default;
-$red-100:         #ffdce0 !default;
-$red-200:         #fdaeb7 !default;
-$red-300:         #f97583 !default;
-$red-400:         #ea4a5a !default;
-$red-500:         #d73a49 !default; // Default. passes AA
-$red-600:         #cb2431 !default;
-$red-700:         #b31d28 !default;
-$red-800:         #9e1c23 !default;
-$red-900:         #86181d !default;
-
-// -------- Purple --------
-$purple-000:      #f5f0ff !default;
-$purple-100:      #e6dcfd !default;
-$purple-200:      #d1bcf9 !default;
-$purple-300:      #b392f0 !default;
-$purple-400:      #8a63d2 !default;
-$purple-500:      #6f42c1 !default; // passes AA with #fff
-$purple-600:      #5a32a3 !default;
-$purple-700:      #4c2889 !default;
-$purple-800:      #3a1d6e !default;
-$purple-900:      #29134e !default;
-
-// -------- Pink --------
-$pink-000:      #ffeef8 !default;
-$pink-100:      #fedbf0 !default;
-$pink-200:      #f9b3dd !default;
-$pink-300:      #f692ce !default;
-$pink-400:      #ec6cb9 !default;
-$pink-500:      #ea4aaa !default;
-$pink-600:      #d03592 !default;
-$pink-700:      #b93a86 !default;
-$pink-800:      #99306f !default;
-$pink-900:      #6d224f !default;
-
-// -------- Fades --------
-$black-fade-15:      rgba($black, 0.15) !default;
-$black-fade-30:      rgba($black, 0.3) !default;
-$black-fade-50:      rgba($black, 0.5) !default;
-$black-fade-70:      rgba($black, 0.7) !default;
-$black-fade-85:      rgba($black, 0.85) !default;
-
-$white-fade-15:      rgba($white, 0.15) !default;
-$white-fade-30:      rgba($white, 0.3) !default;
-$white-fade-50:      rgba($white, 0.5) !default;
-$white-fade-70:      rgba($white, 0.7) !default;
-$white-fade-85:      rgba($white, 0.85) !default;
-
-// -------- Color defaults --------
-$red:         $red-500 !default;
-$purple:      $purple-500 !default;
-$blue:        $blue-500 !default;
-$green:       $green-500 !default;
-$yellow:      $yellow-500 !default;
-$orange:      $orange-500 !default;
-
-$gray-dark:   $gray-900 !default;
-$gray-light:  $gray-400 !default;
-$gray:        $gray-500 !default;
-
-// -------- Color gradient maps --------
-
-$grays: (
-  0: $gray-000,
-  1: $gray-100,
-  2: $gray-200,
-  3: $gray-300,
-  4: $gray-400,
-  5: $gray-500,
-  6: $gray-600,
-  7: $gray-700,
-  8: $gray-800,
-  9: $gray-900,
-) !default;
-
-$blues: (
-  0: $blue-000,
-  1: $blue-100,
-  2: $blue-200,
-  3: $blue-300,
-  4: $blue-400,
-  5: $blue-500,
-  6: $blue-600,
-  7: $blue-700,
-  8: $blue-800,
-  9: $blue-900,
-) !default;
-
-$greens: (
-  0: $green-000,
-  1: $green-100,
-  2: $green-200,
-  3: $green-300,
-  4: $green-400,
-  5: $green-500,
-  6: $green-600,
-  7: $green-700,
-  8: $green-800,
-  9: $green-900,
-) !default;
-
-$yellows: (
-  0: $yellow-000,
-  1: $yellow-100,
-  2: $yellow-200,
-  3: $yellow-300,
-  4: $yellow-400,
-  5: $yellow-500,
-  6: $yellow-600,
-  7: $yellow-700,
-  8: $yellow-800,
-  9: $yellow-900,
-) !default;
-
-$oranges: (
-  0: $orange-000,
-  1: $orange-100,
-  2: $orange-200,
-  3: $orange-300,
-  4: $orange-400,
-  5: $orange-500,
-  6: $orange-600,
-  7: $orange-700,
-  8: $orange-800,
-  9: $orange-900,
-) !default;
-
-$reds: (
-  0: $red-000,
-  1: $red-100,
-  2: $red-200,
-  3: $red-300,
-  4: $red-400,
-  5: $red-500,
-  6: $red-600,
-  7: $red-700,
-  8: $red-800,
-  9: $red-900,
-) !default;
-
-$purples: (
-  0: $purple-000,
-  1: $purple-100,
-  2: $purple-200,
-  3: $purple-300,
-  4: $purple-400,
-  5: $purple-500,
-  6: $purple-600,
-  7: $purple-700,
-  8: $purple-800,
-  9: $purple-900,
-) !default;
-
-$pinks: (
-  0: $pink-000,
-  1: $pink-100,
-  2: $pink-200,
-  3: $pink-300,
-  4: $pink-400,
-  5: $pink-500,
-  6: $pink-600,
-  7: $pink-700,
-  8: $pink-800,
-  9: $pink-900,
-) !default;
-
-$hue-maps: (
-  "gray": $grays,
-  "blue": $blues,
-  "green": $greens,
-  "yellow": $yellows,
-  "orange": $oranges,
-  "red": $reds,
-  "purple": $purples,
-  "pink": $pinks,
-) !default;
diff --git a/assets/scss/_primer/support/variables/colors.scss b/assets/scss/_primer/support/variables/colors.scss
deleted file mode 100644
index 3623156..0000000
--- a/assets/scss/_primer/support/variables/colors.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@import "color-system.scss";
-// Color variables
-
-// Border colors
-$border-white:       $white !default;
-$border-black-fade:  $black-fade-15 !default;
-$border-white-fade:  $white-fade-15 !default;
-$border-gray-dark:   $gray-300 !default;
-$border-gray-darker: $gray-700 !default;
-$border-gray-light:  lighten($gray-200, 3%) !default;
-$border-gray:        $gray-200 !default;
-$border-blue:        $blue-500 !default;
-$border-blue-light:  $blue-200 !default;
-$border-green:       $green-400 !default;
-$border-green-light: desaturate($green-300, 40%) !default;
-$border-purple:      $purple !default;
-$border-red:         $red !default;
-$border-red-light:   $red-300 !default;
-$border-yellow:      $yellow-600 !default;
-
-// Background colors
-$bg-white:          $white !default;
-$bg-black:          $black !default;
-$bg-black-fade:     $black-fade-50 !default;
-$bg-blue-light:     $blue-000 !default;
-$bg-blue:           $blue-500 !default;
-$bg-gray-dark:      $gray-900 !default;
-$bg-gray-light:     $gray-000 !default;
-$bg-gray:           $gray-100 !default;
-$bg-green:          $green-500 !default;
-$bg-green-light:    $green-100 !default;
-$bg-orange:         $orange-700 !default;
-$bg-purple:         $purple-500 !default;
-$bg-purple-light:   $purple-000 !default;
-$bg-pink:           $pink-500 !default;
-$bg-red:            $red-500 !default;
-$bg-red-light:      $red-000 !default;
-$bg-yellow:         $yellow-500 !default;
-$bg-yellow-light:   $yellow-200 !default;
-$bg-yellow-dark:    $yellow-700 !default;
-
-// Text colors
-$text-black:        $black !default;
-$text-white:        $white !default;
-$text-blue:         $blue-500 !default;
-$text-gray-dark:    $gray-900 !default;
-$text-gray-light:   $gray-500 !default;
-$text-gray:         $gray-600 !default;
-$text-green:        $green-600 !default;
-$text-orange:       $orange-900 !default;
-$text-orange-light: $orange-600 !default;
-$text-purple:       $purple !default;
-$text-pink:         $pink-500 !default;
-$text-red:          $red-600 !default;
-$text-yellow:       $yellow-800 !default;
diff --git a/assets/scss/_primer/support/variables/layout.scss b/assets/scss/_primer/support/variables/layout.scss
index 227235c..1c09c00 100644
--- a/assets/scss/_primer/support/variables/layout.scss
+++ b/assets/scss/_primer/support/variables/layout.scss
@@ -63,6 +63,38 @@ $spacer-map: (
   6: $spacer-6,
 ) !default;
 
+// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
+// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
+// 80, 96, etc.
+$spacer-7:  $spacer * 6 !default;  // 48px
+$spacer-8:  $spacer * 8 !default;  // 64px
+$spacer-9:  $spacer * 10 !default; // 80px
+$spacer-10: $spacer * 12 !default; // 96px
+$spacer-11: $spacer * 14 !default; // 112px
+$spacer-12: $spacer * 16 !default; // 128px
+
+$spacers-large: (
+  7: $spacer-7,
+  8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
+) !default;
+
+$spacer-map-extended: map-merge(
+  (
+    0: 0,
+    1: $spacer-1,
+    2: $spacer-2,
+    3: $spacer-3,
+    4: $spacer-4,
+    5: $spacer-5,
+    6: $spacer-6,
+  ),
+  $spacers-large,
+) !default;
+
 // Em spacer variables
 $em-spacer-1: 0.0625em !default; // 1/16
 $em-spacer-2: 0.125em !default;  // 1/8
@@ -141,3 +173,40 @@ $responsive-positions: (
   fixed,
   sticky
 ) !default;
+
+$sidebar-width: (
+  sm: 220px,
+  md: 256px,
+  lg: 296px,
+  xl: 320px
+) !default;
+
+$sidebar-narrow-width: (
+  md: 240px,
+  lg: 256px,
+  xl: 296px
+) !default;
+
+$sidebar-wide-width: (
+  md: 296px,
+  lg: 320px,
+  xl: 344px
+) !default;
+
+$gutter: (
+  md: $spacer-3,
+  lg: $spacer-4,
+  xl: $spacer-5
+) !default;
+
+$gutter-condensed: (
+  md: $spacer-3,
+  lg: $spacer-3,
+  xl: $spacer-4
+) !default;
+
+$gutter-spacious: (
+  md: $spacer-4,
+  lg: $spacer-5,
+  xl: $spacer-6
+) !default;
diff --git a/assets/scss/_primer/support/variables/misc.scss b/assets/scss/_primer/support/variables/misc.scss
index dd74a8f..897aa71 100644
--- a/assets/scss/_primer/support/variables/misc.scss
+++ b/assets/scss/_primer/support/variables/misc.scss
@@ -2,41 +2,16 @@
 
 // Border
 $border-width: 1px !default;
-$border-color: $border-gray !default;
 $border-style: solid !default;
-$border: $border-width $border-color $border-style !default;
+$border: $border-width $border-style var(--color-border-primary) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;
 $border-radius-2:  6px !default;
+$border-radius-3:  8px !default;
 $border-radius: $border-radius-2 !default;
 
-// Box shadow
-$box-shadow: 0 1px 0 rgba($black, 0.04) !default;
-$box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
-$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
-$box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
-
-$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; // top highlight
-$box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner shadow
-$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring
-
-// Button variables
-$border-color-button: $black-fade-15 !default;
-$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?
-
-// Form variables
-$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate?
-$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus
-
 // Tooltips
 $tooltip-max-width: 250px !default;
-$tooltip-background-color: $black !default;
-$tooltip-text-color: $white !default;
 $tooltip-delay: 0.4s !default;
 $tooltip-duration: 0.1s !default;
-
-// diffstat background colors
-$bg-diffstat-added: darken($green-400, 5%) !default;
-$bg-diffstat-deleted: $red-600 !default;
-$bg-diffstat-neutral: $gray-300 !default;
diff --git a/assets/scss/_primer/support/variables/typography.scss b/assets/scss/_primer/support/variables/typography.scss
index dcb57a7..50b7933 100644
--- a/assets/scss/_primer/support/variables/typography.scss
+++ b/assets/scss/_primer/support/variables/typography.scss
@@ -35,7 +35,8 @@ $lh-default: 1.5 !default;
 $body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
 
 // Monospace font stack
-$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !default;
+// Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome
+$mono-font: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace !default;
 
 // The base body size
 $body-font-size: 14px !default;
diff --git a/assets/scss/_primer/utilities/layout.scss b/assets/scss/_primer/utilities/layout.scss
index 1b4da95..10258cd 100644
--- a/assets/scss/_primer/utilities/layout.scss
+++ b/assets/scss/_primer/utilities/layout.scss
@@ -1,7 +1,7 @@
 // Layout
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
 
-// Loop through the breakpoint values
+/* Position */
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @each $position in $responsive-positions {
@@ -12,14 +12,19 @@
   }
 }
 
-/* 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; }
+/* Final position */
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    .top#{$variant}-0 { top: 0 !important; }
+    .right#{$variant}-0 { right: 0 !important; }
+    .bottom#{$variant}-0 { bottom: 0 !important; }
+    .left#{$variant}-0 { left: 0 !important; }
+    .top#{$variant}-auto { top: auto !important; }
+    .right#{$variant}-auto { right: auto !important; }
+    .bottom#{$variant}-auto { bottom: auto !important; }
+    .left#{$variant}-auto { left: auto !important; }
+  }
+}
 
 /* Vertical align middle */
 .v-align-middle      { vertical-align: middle !important; }
@@ -35,10 +40,14 @@
 .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; }
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $overflow in (visible, hidden, auto, scroll) {
+      .overflow#{$variant}-#{$overflow}   { overflow: $overflow !important; }
+      .overflow#{$variant}-x-#{$overflow} { overflow-x: $overflow !important; }
+      .overflow#{$variant}-y-#{$overflow} { overflow-y: $overflow !important; }
+    }
+  }
 }
 
 // Clear floats
diff --git a/package.json b/package.json
index f737243..447e1a9 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,6 @@
   },
   "homepage": "https://github.com/dsrkafuu/hugo-theme-fuji#readme",
   "dependencies": {
-    "@primer/css": "15.1.0"
+    "@primer/css": "17.2.1"
   }
 }