jekyll-v4-theme-primer 0.12.0 → 0.13.0

data/_sass/@primer/css/buttons/misc.scss

@@ -7,7 +7,7 @@
   display: inline-block;
   padding: 0;
   font-size: inherit;
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -24,7 +24,7 @@
   &[aria-disabled='true'] {
     &,
     &:hover {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
       cursor: default;
     }
   }
@@ -42,7 +42,7 @@
 //
 // Typically used as a "cancel" button next to a .btn
 .btn-invisible {
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
   border-radius: $border-radius;
@@ -50,8 +50,8 @@
 
   &:hover,
   &.zeroclipboard-is-hover {
-    color: var(--color-accent-fg);
-    background-color: var(--color-btn-hover-bg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
+    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
     outline: none;
     box-shadow: none;
   }
@@ -60,21 +60,21 @@
   &.selected,
   &[aria-selected='true'],
   &.zeroclipboard-is-active {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
     background: none;
-    border-color: var(--color-btn-active-border);
+    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
 
     @include focusOutline;
   }
 
   &:active &.zeroclipboard-is-active {
-    background-color: var(--color-btn-selected-bg);
+    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     background-color: transparent;
   }
 }
@@ -89,7 +89,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 5px;
   line-height: $lh-condensed-ultra;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   vertical-align: middle;
 
   // For `<button>` elements
@@ -98,7 +98,7 @@
   box-shadow: none;
 
   &:hover {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 
   &:focus,
@@ -108,17 +108,17 @@
 
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     cursor: default;
 
     &:hover {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     }
   }
 }
 
 .btn-octicon-danger:hover {
-  color: var(--color-danger-fg);
+  color: var(--fgColor-danger, var(--color-danger-fg));
 }
 
 // Close button
@@ -126,12 +126,12 @@
 // Typically used with an octicon-x
 .close-button {
   padding: 0;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   background: transparent;
   border: 0;
 
   &:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
   }
 
   &:active {
@@ -165,22 +165,22 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 6px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-decoration: none;
   vertical-align: middle;
-  background: var(--color-neutral-muted);
+  background: var(--bgColor-neutral-muted, var(--color-neutral-muted));
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 1px;
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-accent-muted);
+    background-color: var(--bgColor-accent-muted, var(--color-accent-muted));
   }
 
   &:active {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
   }
 }
 
@@ -210,14 +210,14 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-default);
-  border: $border-width $border-style var(--color-btn-border);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border));
   border-left: 0;
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
-  box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
+  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)), var(--shadow-highlight, var(--color-primer-shadow-highlight));
 
   &:hover,
   &:active {
@@ -225,7 +225,7 @@
   }
 
   &:hover {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
     cursor: pointer;
   }
 }

data/_sass/@primer/css/color-modes/native.scss

@@ -6,8 +6,8 @@
 @include color-mode(dark) { color-scheme: dark; }
 
 [data-color-mode] {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
 }
 
 // Windows High Contrast mode
@@ -18,5 +18,7 @@
   body {
     --color-accent-emphasis: Highlight;
     --color-fg-on-emphasis: LinkText;
+    --fgColor-onEmphasis: LinkText;
+    --fgColor-accent: Highlight;
   }
 }

data/_sass/@primer/css/forms/form-control.scss

@@ -12,14 +12,14 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   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: $border-width $border-style var(--color-border-default);
+  border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
   border-radius: $border-radius;
-  box-shadow: var(--color-primer-shadow-inset);
+  box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
 
@@ -43,20 +43,20 @@
   &.border-0 {
     &:focus,
     &:focus-visible {
-      border: $border-width $border-style var(--color-accent-fg) !important;
+      border: $border-width $border-style var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important;
     }
   }
 
   &[disabled],
   fieldset[disabled] & {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
+    background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
+    border-color: var(--control-borderColor-disabled, var(--color-border-default));
+    -webkit-text-fill-color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
     opacity: 1; // Fix for Safari iOS
 
     &::placeholder {
-      color: var(--color-primer-fg-disabled);
+      color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
     }
   }
 
@@ -79,10 +79,10 @@ textarea.form-control {
 
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
-  background-color: var(--color-canvas-inset);
+  background-color: var(--bgColor-muted, var(--color-canvas-inset));
 
   &:focus {
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
   }
 }
 
@@ -142,7 +142,7 @@ textarea.form-control {
       // stylelint-disable-next-line primer/spacing
       padding: 2px $spacer-1;
       font-style: normal;
-      background: var(--color-attention-subtle);
+      background: var(--bgColor-attention-muted, var(--color-attention-subtle));
       border-radius: $border-radius;
     }
   }
@@ -160,7 +160,7 @@ textarea.form-control {
     margin: 0;
     font-size: $font-size-small;
     font-weight: $font-weight-normal;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 }
 
@@ -199,7 +199,7 @@ textarea.form-control {
         display: inline-block;
         // stylelint-disable-next-line primer/spacing
         margin: 5px 0 0;
-        color: var(--color-fg-muted);
+        color: var(--fgColor-muted, var(--color-fg-muted));
       }
 
       img {
@@ -251,9 +251,9 @@ input::-webkit-inner-spin-button {
   // stylelint-disable-next-line primer/spacing
   margin: 10px 0;
   font-size: $h5-size;
-  color: var(--color-attention-fg);
-  background: var(--color-attention-subtle);
-  border: $border-width $border-style var(--color-attention-emphasis);
+  color: var(--fgColor-attention, var(--color-attention-fg));
+  background: var(--bgColor-attention-muted, var(--color-attention-subtle));
+  border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
   border-radius: $border-radius;
 
   p {

data/_sass/@primer/css/forms/form-group.scss

@@ -17,7 +17,7 @@
   // Autocomplete with embedded icon
   .form-control.autocomplete-embedded-icon-wrap {
     &:focus-within {
-      background-color: var(--color-canvas-default);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
     }
   }
 
@@ -28,10 +28,10 @@
     max-width: 100%;
     // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    background-color: var(--color-canvas-inset);
+    background-color: var(--bgColor-muted, var(--color-canvas-inset));
 
     &:focus {
-      background-color: var(--color-canvas-default);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
     }
 
     &.shorter {
@@ -98,11 +98,11 @@
       margin: $spacer-1 0 0;
 
       &.is-error {
-        color: var(--color-danger-fg);
+        color: var(--fgColor-danger, var(--color-danger-fg));
       }
 
       &.is-success {
-        color: var(--color-success-fg);
+        color: var(--fgColor-success, var(--color-success-fg));
       }
 
       + .note {
@@ -121,7 +121,7 @@
     .form-group-header label::after {
       // stylelint-disable-next-line primer/spacing
       padding-left: 5px;
-      color: var(--color-danger-fg);
+      color: var(--fgColor-danger, var(--color-danger-fg));
       content: '*';
     }
   }
@@ -154,7 +154,7 @@
   &.successful {
     .success {
       display: inline;
-      color: var(--color-success-fg);
+      color: var(--fgColor-success, var(--color-success-fg));
     }
   }
 
@@ -210,63 +210,63 @@
 
   &.successed {
     .success {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
-      border-color: var(--color-success-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-success-muted, var(--bgColor-success-muted, var(--color-success-subtle))), var(--color-success-subtle));
+      border-color: var(--borderColor-success-muted, var(--color-success-muted));
 
       &::after {
-        border-bottom-color: var(--color-success-subtle);
+        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
       }
 
       &::before {
-        border-bottom-color: var(--color-success-muted);
+        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
       }
     }
   }
 
   &.warn {
     .form-control:not(:focus, :focus-visible) {
-      border-color: var(--color-attention-emphasis);
+      border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
     }
 
     .warning {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
-      border-color: var(--color-attention-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-attention-muted, var(--bgColor-attention-muted, var(--color-attention-subtle))), var(--color-attention-subtle));
+      border-color: var(--borderColor-attention-muted, var(--color-attention-muted));
 
       &::after {
-        border-bottom-color: var(--color-attention-subtle);
+        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
       }
 
       &::before {
-        border-bottom-color: var(--color-attention-muted);
+        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
       }
     }
   }
 
   &.errored {
     .form-control:not(:focus, :focus-visible) {
-      border-color: var(--color-danger-emphasis);
+      border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
     }
 
     label {
-      color: var(--color-danger-fg);
+      color: var(--fgColor-danger, var(--color-danger-fg));
     }
 
     .error {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
-      border-color: var(--color-danger-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-danger-muted, var(--bgColor-danger-muted, var(--color-danger-subtle))), var(--color-danger-subtle));
+      border-color: var(--borderColor-danger-muted, var(--color-danger-muted));
 
       &::after {
-        border-bottom-color: var(--color-danger-subtle);
+        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
       }
 
       &::before {
-        border-bottom-color: var(--color-danger-muted);
+        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
       }
     }
   }
@@ -278,7 +278,7 @@
   // stylelint-disable-next-line primer/spacing
   margin: $spacer-1 0 2px;
   font-size: $font-size-small;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 
   .spinner {
     // stylelint-disable-next-line primer/spacing

data/_sass/@primer/css/forms/form-select.scss

@@ -6,7 +6,7 @@
   max-width: 100%;
   height: $size-5;
   padding-right: $spacer-4;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   // SVG with fill: #586069 (--color-icon-secondary)
   background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
   background-repeat: no-repeat;

data/_sass/@primer/css/forms/input-group.scss

@@ -54,6 +54,11 @@
   border-bottom-right-radius: 0;
 }
 
+.input-group .form-control:first-child,
+.input-group-button:first-child .btn:not(.btn-primary) {
+  border-color: var(--control-borderColor-rest, var(--color-border-default));
+}
+
 .input-group-button:first-child .btn {
   // stylelint-disable-next-line primer/spacing
   margin-right: -1px;
@@ -65,6 +70,11 @@
   border-bottom-left-radius: 0;
 }
 
+.input-group .form-control:last-child,
+.input-group-button:last-child .btn:not(.btn-primary) {
+  border-color: var(--control-borderColor-rest, var(--color-border-default));
+}
+
 .input-group-button:last-child .btn {
   // stylelint-disable-next-line primer/spacing
   margin-left: -1px;

data/_sass/@primer/css/forms/radio-group.scss

@@ -13,14 +13,14 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px; // Specifically not inherit our `<body>` default
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   cursor: pointer;
-  border: $border-width $border-style var(--color-border-default);
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
 
   :checked + & {
     position: relative;
     z-index: 1;
-    border-color: var(--color-accent-emphasis);
+    border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
   }
 
   &:first-of-type {
@@ -36,7 +36,7 @@
 
   .octicon {
     margin-left: $spacer-1;
-    color: var(--color-fg-subtle);
+    color: var(--fgColor-muted, var(--color-fg-subtle));
   }
 }
 
@@ -50,9 +50,9 @@
     position: relative; // enables z-index
 
     + .radio-label {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
       cursor: default;
-      background-color: var(--color-neutral-subtle);
+      background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
 
       .octicon {
         color: inherit;

data/_sass/@primer/css/header/header.scss

@@ -4,8 +4,8 @@
   padding: $spacer-3;
   font-size: $h5-size;
   line-height: $lh-default;
-  color: var(--color-header-text);
-  background-color: var(--color-header-bg);
+  color: var(--header-fgColor-default, var(--color-header-text));
+  background-color: var(--header-bgColor, var(--color-header-bg));
   align-items: center;
   flex-wrap: nowrap;
 }
@@ -24,20 +24,20 @@
 
 .Header-link {
   font-weight: $font-weight-bold;
-  color: var(--color-header-logo);
+  color: var(--header-fgColor-logo, var(--color-header-logo));
   white-space: nowrap;
 
   &:hover,
   &:focus {
-    color: var(--color-header-text);
+    color: var(--header-fgColor-default, var(--color-header-text));
     text-decoration: none;
   }
 }
 
 .Header-input {
-  color: var(--color-header-text);
-  background-color: var(--color-header-search-bg);
-  border: $border-width $border-style var(--color-header-search-border);
+  color: var(--header-fgColor-default, var(--color-header-text));
+  background-color: var(--headerSearch-bgColor, var(--color-header-search-bg));
+  border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border));
   box-shadow: none;
 
   &::placeholder {

data/_sass/@primer/css/layout/app-frame.scss

@@ -29,7 +29,7 @@
     display: flex;
     width: 100%;
     padding: var(--base-size-16, 16px);
-    background: var(--color-canvas-inset);
+    background: var(--bgColor-inset, var(--color-canvas-inset));
     padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
     isolation: isolate;
     align-items: center;
@@ -66,7 +66,7 @@
       overflow: hidden;
       text-indent: var(--base-size-128, 128px);
       pointer-events: none;
-      background: var(--color-border-default);
+      background: var(--borderColor-default, var(--color-border-default));
       border-radius: var(--borderRadius-full, 100vh);
     }
 
@@ -78,8 +78,8 @@
       min-height: var(--control-medium-size, 32px);
       padding: 0 var(--control-medium-paddingInline-spacious, 16px);
       overflow: auto;
-      color: var(--color-fg-on-emphasis);
-      background: var(--color-accent-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
       border-radius: var(--borderRadius-full, 100vh);
       align-items: center;
 
@@ -95,17 +95,17 @@
 
       @keyframes AppFrame-a11yLink-focus {
         0% {
-          color: var(--color-accent-emphasis);
+          color: var(--fgColor-accent, var(--color-accent-emphasis));
           transform: scale(0.3, 0.25);
         }
 
         50% {
-          color: var(--color-accent-emphasis);
+          color: var(--fgColor-accent, var(--color-accent-emphasis));
           transform: scale(1, 1);
         }
 
         55% {
-          color: var(--color-fg-on-emphasis);
+          color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
         }
 
         100% {

data/_sass/@primer/css/layout/page-layout.scss

@@ -2,7 +2,7 @@
 // stylelint-disable selector-max-specificity
 // stylelint-disable no-duplicate-selectors
 
-$Layout-divider-color: var(--color-border-default) !default;
+$Layout-divider-color: var(--borderColor-default, var(--color-border-default)) !default;
 $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 :root {
@@ -14,12 +14,10 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   --Layout-row-gap: #{$spacer-3};
 
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable length-zero-no-unit
   --Layout-outer-spacing-x: 0px; // wrapper margin x
   --Layout-outer-spacing-y: 0px; // wrapper margin y
   --Layout-inner-spacing-min: 0px; // default region padding
   --Layout-inner-spacing-max: 0px; // relaxed content horizontal padding
-  // stylelint-enable length-zero-no-unit
 }
 
 // Layout beta mixins
@@ -44,7 +42,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
   height: #{$spacer-2}; // 8px
   content: '';
-  background-color: var(--color-canvas-inset);
+  background-color: var(--bgColor-inset, var(--color-canvas-inset));
   box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
 }
 
@@ -378,7 +376,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 .PageLayout--columnGap-none {
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable-next-line length-zero-no-unit
   --Layout-column-gap: 0px;
 }
 
@@ -394,7 +391,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 .PageLayout--rowGap-none {
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable length-zero-no-unit
   --Layout-row-gap: 0px;
 }
 

data/_sass/@primer/css/layout/stack.scss

@@ -30,7 +30,7 @@
   --Stack-gap-whenRegular: #{$Stack-gap-default};
   --Stack-gap-whenNarrow: #{$Stack-gap-default};
   --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
-  --Stack-divider-color: var(--color-border-default);
+  --Stack-divider-color: var(--borderColor-default, var(--color-border-default));
 
   display: flex;
   flex-flow: column;

data/_sass/@primer/css/markdown/blob-csv.scss

@@ -15,7 +15,7 @@
     // stylelint-disable-next-line primer/spacing
     padding: 10px $spacer-2 9px;
     text-align: right;
-    background: var(--color-canvas-default);
+    background: var(--bgColor-default, var(--color-canvas-default));
     border: 0;
   }
 
@@ -23,7 +23,7 @@
 
   th {
     font-weight: $font-weight-bold;
-    background: var(--color-canvas-subtle);
+    background: var(--bgColor-muted, var(--color-canvas-subtle));
     border-top: 0;
   }
 }